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

[josezone]

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

appTsConfig.compilerOptions[option] = value;
^

TypeError: Cannot assign to read only property 'jsx' of object '#'
at verifyTypeScriptSetup (C:\Users~\proj\doc\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:239:43)
at Object. (C:\Users~\proj\doc\node_modules\react-scripts\scripts\start.js:31:1)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:72:12)
at node:internal/main/run_main_module:17:47

System:
OS: Windows 10 10.0.19041
CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
Binaries:
Node: 15.0.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.19041.423.0), Chromium (86.0.622.56)
Internet Explorer: 11.0.19041.1
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.0 => 4.0.0
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

-After running yarn create react-app doc --template typescript,
-I updated typescript to beta and 4.1.0-dev.20201029, this producing the following error

Expected behavior

The app should run

Actual behavior

Error causing failure to run.

Reproducible demo

the source file can be found here
https://drive.google.com/file/d/16dZNYLMiZ7OuruyKkSfJ4g8nwsm7lqyQ/view?usp=sharing

[sheepsteak]

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

create-react-app/packages/react-scripts/package.json

Line 97 in 545d460

"typescript": "^3.2.1"

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: #9892 (comment)

[guru-dev1004]

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!

[pshergie]

I have the same problem with react 17.0.2 and typescript 4.4.3