4.0.0 breaks with typescript (all versions)

Describe the bug

I made a clean install of cra@next with typescript and then upgraded typescript to 4.1.0-beta ( also tested 4.1.0-dev.20201023 )

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

$$$ then replaced typescript 4.0.3 with 4.1.0-beta ( or ^4.1.0-beta ) in package.json

rm -rf node_modules package-lock.json && npm i

npm start

Error message:

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

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'

( EDIT: This doesn't happen with cra 4.0.0-next.98 )

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

I just looked for typescript bugs reported and closed in the last few days

Environment

System:
OS: macOS 10.15.7
CPU: (8) x64 Intel(R) Core(TM) i7-4770K CPU @ 3.50GHz
Binaries:
Node: 14.14.0 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.8 - /usr/local/bin/npm
Browsers:
Chrome: 86.0.4240.111
Firefox: Not Found
Safari: 14.0
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.0-next.117 => 4.0.0-next.117
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app
replace typescript 4.0.3 with 4.1.0-beta ( or ^4.1.0-beta ) in package.json
rm -rf node_modules package-lock.json && npm i
npm start

Expected behavior

Should work out of the box

Actual behavior

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

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'

Reproducible demo

Steps are simple enough to build your own demo

There is another similar issue with updating the TypeScript config file. We're still trying to determine the root cause. In this particular case you can work around it by manually setting jsx: react-jsx in tsconfig.json.

@iansu

@iansu That doesn't work.

I did the same steps as above, and put "jsx": "react-jsx" in tsconfig.json.

I get the same error when running npm start

That was working for me. You can also try deleting your tsconfig.json and it should automatically get recreated with the new settings.

First attempt:

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app
edit package.json: set "typescript" version to ^4.1.0-beta
edit tsconfig.json: set "jsx" to "react-jsx"
rm -rf node_modules package-lock.json && npm i
npm start

Error:

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

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'

Second try: deleting tsconfig.json before running npm start. Works! But why?

Here's the recreated tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

That looks exactly the same as the file I had before 😕

I don't know why just changing that value wasn't working for you. This is an annoying bug that we're hoping to have fixed soon.

@iansu

@iansu I found it!!

I started debugging verifyTypSscriptSetup.js

First issue I found: (line 151)

    jsx: {
      parsedValue:
        hasJsxRuntime && semver.gte(ts.version, '4.1.0-beta')
          ? ts.JsxEmit.ReactJsx
          : ts.JsxEmit.React,

It must be ts.JsxEmit.ReactJSX (capital letters) instead of ts.JsxEmit.ReactJsx.

Perfect example why people use TypeScript instead of plain old JS. 😏

You're right about the capitalization but I don't know if that's the root issue. For example, if you change moduleResolution to classic you'll get the same error and that definitely used to work.

If you'd like to submit a PR to fix that casing issue that would be appreciated.

Already done: #9869

fix react/create-react-app#9868

you can delete tsconfig.json , npm run start . The project will create new tsconfig.json file .

This doesn't change anything as the new tsconfig created by react-scripts is doomed, too. I'd say it's a blocker for any newcommer to the CRA and react developement in general.

update to react-scripts 4.0.1 they fixed it, and it works now as far as I know

chore: react-script 4.0.0 issue 해결을 위한 버전업

It works for:

package.json
"react-scripts": "4.0.0",
"typescript": "4.0.3",
tsconfig.json
"jsx": "react",

works for me too

Still does not work with react-scripts 4.0.1 and typescript 4.1.3

For some reason it does work with yarn.

rm -r node_modules
yarn install

Okay, the issue was caused by nvm (Node version manager), i had to uninstall nvm and reinstall node through brew.
Now it's working fine !

Okay, the issue was caused by nvm (Node version manager), i had to uninstall nvm and reinstall node through brew.
Now it's working fine !

that sounds a solution, will give it a try!

Yes this issue is fixed I am using "react-scripts": "^4.0.1" and "typescript": "^4.1.3" which are latest today.

In some cases you may want to remove the node_modules directory and clean install.

Still does not work with react-scripts 4.0.2 and typescript 4.1.4. Any updates?

It works for:

package.json
"react-scripts": "4.0.0",
"typescript": "4.0.3",
tsconfig.json
"jsx": "react",

I'm still gettgin this jsx issue with react-scripts=4.0.3 and typescript=4.2.3. For now I'm good with downgrading typescript.

I solve this error updating react-scripts to 4.0.3

yarn upgrade react-scripts@4.0.3

It still does not work with react-scripts 4.0.3 and typescript 4.2.4.

UPDATE
Try to use

TSC_COMPILE_ON_ERROR=true npm start

fix react/create-react-app#9868

Navigation Menu

Repository navigation

4.0.0 breaks with typescript (all versions) #9868

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

106 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

4.0.0 breaks with typescript (all versions) #9868

Description

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

Activity

iansu commented on Oct 23, 2020

benneq commented on Oct 23, 2020

iansu commented on Oct 23, 2020

benneq commented on Oct 23, 2020

iansu commented on Oct 23, 2020

benneq commented on Oct 23, 2020

iansu commented on Oct 23, 2020

iansu commented on Oct 23, 2020

benneq commented on Oct 23, 2020

106 remaining items

srvmux commented on Dec 8, 2020

thiago-anjos commented on Jan 21, 2021

pierremouchan commented on Jan 23, 2021

xorb commented on Jan 24, 2021

pierremouchan commented on Jan 25, 2021

HashemKhalifa commented on Jan 25, 2021

mumairofficial commented on Feb 3, 2021

clemente-xyz commented on Feb 9, 2021

Townsheriff commented on Mar 15, 2021

joaoromeira commented on Jul 16, 2021

serchserch commented on Jul 31, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions