Unable to run create-ink-app --typescript project

[parkerault]

Following the getting started guide:

user@DESKTOP-CFOTQL1:~/projects/foo$ npx create-ink-app --typescript
user@DESKTOP-CFOTQL1:~/projects/foo$ npm run start

> foo@0.0.0 start /home/user/projects/foo
> npm run build && dist/cli.js


> foo@0.0.0 build /home/user/projects/foo
> tsc

(node:19237) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/user/projects/foo/dist/cli.js:2
import React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! foo@0.0.0 start: `npm run build && dist/cli.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the foo@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2021-05-04T21_25_50_771Z-debug.log

Using node version 14.16.1 lts

[Caryyon]

Getting similar issues but about meow

I've made it known there as well meow:172

[LitoMore]

See sindresorhus/meow#172 (comment)

I created a PR for fixing this issue: vadimdemedes/create-ink-app#14.

[chrisvoo]

When is the PR going to be merged?

[mattdanielmurphy]

Just ran into this issue myself, for the record. Sorry if I'm spamming or something.

[iamjaredwalters]

Anything I can do to help move this along?

[RileyMShea]

Edit Part of this can be fixed after running create-ink-app --typescript by adding:

    importMeta:import.meta,

to /source/cli.tsx so it looks this:

#!/usr/bin/env node
import React from 'react';
import {render} from 'ink';
import meow from 'meow';
import App from './ui';

const cli = meow(`
	Usage
	  $ myink

	Options
		--name  Your name

	Examples
	  $ myink --name=Jane
	  Hello, Jane
`, {
    importMeta:import.meta,
	flags: {
		name: {
			type: 'string'
		}
	}
});

render(<App name={cli.flags.name}/>);

but the build will still fail due to esm module interactions at least on nodev14, 16 might support it. Reccomend following Litomore's advice below.

[LitoMore]

I sent a message to @vadimdemedes through Twitter and email. And asking @sindresorhus for help.

Before the problem is solved, for CommonJS modules you can apply my changes according to this PR in the generated pakcage.json and tsconfig.json, then rerun npm install.

For CommonJS modules

In package.json:

• Replace "meow": "xxx" with "meow": "^9"
• Replace "xo": "xxx" with "xo": "0.39.1"

In tsconfig.json:

• Add "module": "commonjs" into compilerOptions

For ESM

Refer to @RileyMShea's comment.

[vadimdemedes]

Fix released in v2.1.1 thanks to @LitoMore!