Create-react-app: Issue running "react-scripts": "4.0.0" with typescript 4.1 beta and 4.1.0-dev.20201029

[sheepsteak]

The release notes state TypeScript 4 is supported and the TypeScript template installs v4 but react-scripts still only allows TypeScript 3:

https://github.com/facebook/create-react-app/blob/545d4607c81dd876c06f66b8104056a3570af242/packages/react-scripts/package.json#L97

I'm not sure which one is right and if CRA properly supports TypeScript 4 yet.

[sumanthratna]

~I believe TS 4.0.3 works—it's 4.1.0 that causes errors—so maybe try 4.0.3 for now.~ I definitely do think that the CRA CLI should catch the error and print a less ugly error, though

edit: I was thinking of a different project; it looks like CRA 4 really doesn't support TS 4 at all

[josezone]

New jsx is supported only in typescript 4.1, react-script 4.0.0 prerelease version was not throwing error,
Edit: but it was node 14 at that time

[neo]

I am having a similar issue where the generated tsconfig from cra with [email protected] beta errors out when I start for the second time. I'm guessing it's because although it generates "jsx": "react-jsx" in the tsconfig, it's still expecting "jsx": "react" when running (subsequent) start.

[josezone]

Also not working with 4.1.1-rc

[jawsper]

A solution was posted in another issue: https://github.com/facebook/create-react-app/issues/9892#issuecomment-718221965

[Eric-Lin-Dev]

You mean this solution?
Add "noFallthroughCasesInSwitch": true, to your tsconfig.json.
But it's not working on myside.

[josezone]

Delete tsconfig and start react, this will recreate tsconfig then it shows
undefined
fork-ts-checker-webpack-plugin error in undefined(undefined,undefined):
start < 0 TSINTERNAL

and restarting it creates the old issue again.

i was looking into verifyTypeScriptSetup

const { config: readTsConfig, error } = ts.readConfigFile(
paths.appTsConfig,
ts.sys.readFile
);
https://npmdoc.github.io/node-npmdoc-typescript/build/apidoc.html#apidoc.element.typescript.readConfigFile

this readTsConfig is in turn assigned to appTsConfig.

to make it mutable I edited it to,

immer(appTsConfig, config => {
config.compilerOptions[option] = value;
})

now it is again showing,

undefined
fork-ts-checker-webpack-plugin error in undefined(undefined,undefined):
start < 0 TSINTERNAL

fork-ts-checker-webpack-plugin is a requirement for react-dev-utils which is required by react-scripts,

[josezone]

Also, I can see hasJsxRuntime && semver.gte(ts.version, '4.1.0-beta'), this is very specific, I updated it to match the version that is installed, the issue still persists

[sklawren]

I am having this issue with a fresh install of CRA 4.0.0 and TypeScript 4.1.1-rc.

> react-scripts start

/my-app/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (/my-app/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (/my-app/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)
    at startup (internal/bootstrap/node.js:285:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)

I deleted tsconfig.json and the first time it runs, I don't see the read only property error, but I see this:

Failed to compile.

undefined
fork-ts-checker-webpack-plugin error in undefined(undefined,undefined):
start < 0  TSINTERNAL

If I kill the process and npm start, I get the first error.

Not sure what to do now.

[davidhenley]

+1

"typescript": "4.1.1-rc"

Failed to compile.

undefined
fork-ts-checker-webpack-plugin error in undefined(undefined,undefined):
start < 0  TSINTERNAL

[RNR1]

I am also experiencing these issues, really looking forward for CRA with typescript to support the new JSX transform.

[hejrobin]

Can confirm that [email protected] does _not_ work with [email protected].

Output after yarn start;

Failed to compile.

undefined
fork-ts-checker-webpack-plugin error in undefined(undefined,undefined):
start < 0 TSINTERNAL

And there's no need to mention the "fix" noFallthroughCasesInSwitch, as it is already set.

[zackify]

I created a brand new create-react-app today, with the typescript template. It installs [email protected], and doing an npm start is failing for me as well, I didn't try using a beta version of TS either

[Zhouzi]

I am also experiencing this when creating a new application. The workaround for me was to downgrade Typescript:

- "typescript": "^4.0.3"
+ "typescript": "4.0.2"

And change the tsconfig's jsx option:

-  "jsx": "react-jsx"
+ "jsx": "react"

With those changes, the application is starting as expected 👌

[zackify]

I found out a work around as well. If you want to use 4.1:

You cannot install 4.1.2, but you can install "typescript": "^4.1.0-beta".... Somehow 4.1.0-beta has the new transform, but 4.1.2 doesn't. And then, you must manually patch the verifyTypeScriptSetup file with the merged pr that isn't in a release yet: https://github.com/facebook/create-react-app/pull/9921/files, this is what I am doing for now.

[mrlubos]

Running into this in TypeScript 4.1.2, seen it happen with rc and beta as well though

[RNR1]

I will add to @zackify comment, that when running react-scripts@next, you can also rename the typescript version in that file to typescript 4.1.2 and it works

[RNR1]

react-scripts 4.0.1 has been published,
And this issues seems to be resolved :) thanks for the CRA team

[mrlubos]

Yay! It works

[floyd-jones]

Yess, my project works now aswell. 🎊
But can anyone help me, I get an error like module was resolved to but '--jsx' is not set. It doesn't show up when my tsconfig is set to jsx: react but now since it overwrites the file it changes it to jsx: react-jsx. Its not blocking the app it still runs, I just get VScode complaining with that error. All my files have ext tsx if that help?

[RNR1]

@floyd-jones make sure to select the workspace typescript version in vscode(ctrl+shift+p and then type ”TypeScript: Select Version”, make sure it's 4.1.2

[josezone]

Issue resolved

[floyd-jones]

@floyd-jones make sure to select the workspace typescript version in vscode(ctrl+shift+p and then type ”TypeScript: Select Version”, make sure it's 4.1.2

@RNR1 Thank you!