4.0.0 breaks with typescript (all versions) #9868

benneq · 2020-10-23T10:54:51Z

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

The text was updated successfully, but these errors were encountered:

iansu · 2020-10-23T14:21:28Z

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.

benneq · 2020-10-23T14:29:16Z

@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

iansu · 2020-10-23T14:33:30Z

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

benneq · 2020-10-23T14:45:25Z

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 😕

iansu · 2020-10-23T14:47:18Z

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.

benneq · 2020-10-23T15:38:17Z

@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. 😏

iansu · 2020-10-23T15:41:24Z

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.

iansu · 2020-10-23T15:42:44Z

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

benneq · 2020-10-23T15:44:27Z

Already done: #9869

benneq · 2020-10-23T15:49:39Z

For example, if you change moduleResolution to classic you'll get the same error and that definitely used to work.

True. But at least I can now restart my app without always deleting tsconfig.json

Btw: I doesn't matter what you change. You don't have to change anything at all. Just save the file as is, and you'll get the error.

benneq · 2020-10-23T16:00:29Z

More Information:

Object.isFrozen(appTsConfig) // false
Object.isFrozen(appTsConfig.compilerOptions) // true
Object.isFrozen(appTsConfig.compilerOptions[option]) // true

That would explain why the property isn't writable.

How about a simple workaround that creates a new object instead of modifying the parsed data?

benneq · 2020-10-23T16:15:28Z

I think I got it! (lines 173 to 194)

    const { config: readTsConfig, error } = ts.readConfigFile(
      paths.appTsConfig,
      ts.sys.readFile
    );

    console.log(Object.isFrozen(readTsConfig.compilerOptions)); // false

    appTsConfig = readTsConfig;

    parsedTsConfig = immer(readTsConfig, config => {
      result = ts.parseJsonConfigFileContent(
        config,
        ts.sys,
        path.dirname(paths.appTsConfig)
      );
    });

    console.log(Object.isFrozen(readTsConfig.compilerOptions)); // true

Guess who's bad...

Again: Wouldn't have happened with TypeScript code 😼

Immer automatically freezes any state trees that are modified using produce.

source: https://immerjs.github.io/immer/docs/freezing

I guess the author of these lines knows why he used immer and how to fix this 😄 Commit: 315ff4b#diff-2f231dbdc363c929e899c94ae0d999f9886fdc6e33fb88d498a6b101a4bf9f68

@ianschmitz Your help would be appreciated

jamesmfriedman · 2020-10-23T20:18:24Z

I have come across the same issue, I triaged it the exact same way all the way down to immer.

I think the easiest solution here is to just not use immer... It's creating an immutable data structure, but then following code attempts to mutate it 🤷‍♂️.

jamesmfriedman · 2020-10-23T20:24:56Z

This resolves the issue, although removes the reason to use immer... Plop this at the top of the file.

const setAutoFreeze = require('react-dev-utils/immer').setAutoFreeze;
setAutoFreeze(false);

benneq · 2020-10-23T20:26:11Z

But maybe this causes other issues. I guess there's reason why @ianschmitz introduced immer there.

jamesmfriedman · 2020-10-23T20:34:25Z

@benneq just to be clear, you might want to update the title of this issue, I have verified:

This breaks with ANY version of TS
This happens anytime one of your local config params doesn't exactly match what create-react-app spits out by default.
Simple repro, just set "paths" to anything, and watch it fail.
Another repro, as you have stated, try setting "jsx": to "react-jsx"

I think this is a critical bug for anyone trying to migrate over.

NearHuscarl · 2020-10-24T12:02:19Z

See my answer here for a temporary fix. Also kinda related to #9429.

PupoSDC · 2020-10-24T12:13:35Z

@NearHuscarl Unfortunately this temporary fix only works if at the end of the day you are using the default TS config in your project. Our project brakes because we use baseUrl: "./src", and we can't hotfix it... :(

DenysVuika · 2020-10-24T14:23:13Z

having the same problem, with TS 4.1.0-beta, yarn build works fine, but yarn start gives me

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

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

marceloclp · 2020-11-23T20:07:51Z

For anyone looking for a more reliable work around for the time being, that doesn't consist on deleting the tsconfig file or manually changing the content of the faulty file every time dependencies are updated, here is what I did:

Run yarn add line-replace --dev
Create a js file with the code below somewhere on your root folder.
Update your start script in package.json to node path/to/file && react-scripts start

const rplce = require('line-replace')
const path = require('path')

const filePath = path.join(
    __dirname,
    '../node_modules/react-scripts/scripts/utils',
    'verifyTypeScriptSetup.js',
)

rplce({
    file: filePath,
    line: 238,
    text: "    } else if (parsedCompilerOptions[option] !== valueToCheck && option !== 'jsx') {",
    callback: ({ file, error }) => {
        if (error) return console.error(error)
        console.log(`Replaced ${file} successfuly!`)
    }
})

So your script should look something like this:

{
  "start": "node fix-cra.js && react-scripts start"
}

Message Error: Cannot use JSX unless '--jsx' flag is provided Issue: facebook/create-react-app#9868

DangoPlus · 2020-11-26T03:20:44Z

Since, I don't like to use beta versions, I used the following settings:
Use an older typescript version (here typescript 4.0.5) with react-scripts 4.0.0, which fit together nicely.
package.json
"react-scripts": "4.0.0",
"typescript": "4.0.5",
Now, you have to adjust tsconfig.json, because "jsx": "react-jsx" is not available in this typescript version. If you don't adjust tsconfig you will run into the following error:
error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'.
Use "jsx": "react" instead.
If you'd like to use beta or dev versions, you could simply use a new typescript dev version:
"react-scripts": "4.0.0",
"typescript": "4.2.0-dev.20201121",
This worked perfectly for me. Hopefully this gets patched sometime soon, I'm not using it for anything particularly important but I know many people do use it for pretty important stuff.

This solution is work for me too.
In my case, I use cra 4.0.1 and craco with typescript, when I run yarn start or yarn build, the tsconfig.json file will changed by verifyTypeScriptSetup.js(in react-scripts, line153-line157).
jsx: { parsedValue: hasJsxRuntime && semver.gte(ts.version, '4.1.0-beta') ? ts.JsxEmit.ReactJSX : ts.JsxEmit.React, value: hasJsxRuntime && semver.gte(ts.version, '4.1.0-beta') ? 'react-jsx' : 'react', reason: 'to support the new JSX transform in React 17', },
The "jsx": "react" will be change to "jsx": "react-jsx" Automatically.
when I change the typescript version to "typescript": "4.0.5", the tsconfig.json file doesn't change anymore.

cas8180 · 2020-11-26T12:59:45Z

Fix for me was to adjust the TS version within VS code.

fjplaurr · 2020-11-30T00:01:28Z

Since, I don't like to use beta versions, I used the following settings:
Use an older typescript version (here typescript 4.0.5) with react-scripts 4.0.0, which fit together nicely.
package.json
"react-scripts": "4.0.0",
"typescript": "4.0.5",
Now, you have to adjust tsconfig.json, because "jsx": "react-jsx" is not available in this typescript version. If you don't adjust tsconfig you will run into the following error:
error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'.
Use "jsx": "react" instead.
If you'd like to use beta or dev versions, you could simply use a new typescript dev version:
"react-scripts": "4.0.0",
"typescript": "4.2.0-dev.20201121",
This worked perfectly for me. Hopefully this gets patched sometime soon, I'm not using it for anything particularly important but I know many people do use it for pretty important stuff.

Tried this configuration in container running node:12.20.0-alpine3.10 and works!

fishenal · 2020-12-03T09:12:14Z

maybe the package.json should be ^4.0.0 instead of 4.0.0

hongguang-alt · 2020-12-05T01:17:34Z

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

Lukortech · 2020-12-06T01:46:08Z

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.

0x0000F1 · 2020-12-08T06:23:13Z

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

- tsconfig 최초 생성 시에만 스크립트가 작동하는 문제 - facebook/create-react-app#9868

thiago-anjos · 2021-01-21T18:53:06Z

It works for:

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

works for me too

pierremouchan · 2021-01-23T13:26:26Z

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

xorb · 2021-01-24T15:50:55Z

For some reason it does work with yarn.

rm -r node_modules
yarn install

pierremouchan · 2021-01-25T07:51:52Z

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 !

HashemKhalifa · 2021-01-25T08:47:02Z

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!

mumairofficial · 2021-02-03T07:19:46Z

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.

ghost · 2021-02-06T23:13:05Z

Using VS code, I had to uninstall an extension named typescript god. Closed and reopened VS code. Works fine now. Using "typescript": "^4.1.3" with "react-scripts": "4.0.2"

clemente-xyz · 2021-02-09T22:23:38Z

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

Townsheriff · 2021-03-15T13:06:42Z

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.

joaoromeira · 2021-07-16T12:56:09Z

I solve this error updating react-scripts to 4.0.3

yarn upgrade [email protected]

serchserch · 2021-07-31T00:13:40Z

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

benneq added issue: bug report needs triage labels Oct 23, 2020

iansu added issue: bug and removed needs triage labels Oct 23, 2020

iansu removed the issue: bug report label Oct 23, 2020

iansu added this to the 4.0.1 milestone Oct 23, 2020

benneq mentioned this issue Oct 23, 2020

Fix react-jsx error #9869

Merged

benneq changed the title ~~4.0.0-next.117 breaks with typescript 4.1.0 beta~~ 4.0.0 breaks with typescript (all versions) Oct 23, 2020

elylucas mentioned this issue Oct 23, 2020

Error when trying to run an upgraded CRA 4 Typescript project #9874

Open

dsherret mentioned this issue Oct 24, 2020

Fix build for TS 4.0 dsherret/ts-ast-viewer#79

Closed

danielnixon mentioned this issue Oct 25, 2020

4.0 alpha - TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible #9429

Closed

siren added a commit to City-of-Helsinki/tilavarauspalvelu-ui that referenced this issue Nov 25, 2020

use versions that actually work (facebook/create-react-app#9868)

bfd0ea6

wijloc added a commit to wijloc/github-explorer that referenced this issue Nov 25, 2020

fix: error using jsx

a5c7b98

Message Error: Cannot use JSX unless '--jsx' flag is provided Issue: facebook/create-react-app#9868

elylucas mentioned this issue Nov 25, 2020

bug: react build breaks on upgrade to 17 - compiler options set to react-jsx and this is not recognized ionic-team/ionic-framework#22537

Closed

jasonjoh mentioned this issue Nov 30, 2020

First step fails microsoftgraph/msgraph-sample-reactspa#62

Closed

rayyildiz added a commit to rayyildiz/capture-tweet that referenced this issue Dec 7, 2020

fix facebook/create-react-app#9868

6da0442

wangshengfei mentioned this issue Dec 9, 2020

预约系统项目复盘 wangshengfei/blog#8

Open

hwookim added a commit to hwookim/react-todolist that referenced this issue Jan 7, 2021

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

057fa99

- tsconfig 최초 생성 시에만 스크립트가 작동하는 문제 - facebook/create-react-app#9868

htbkoo mentioned this issue Feb 6, 2021

Upgrade dependencies htbkoo/personal-portfolio#34

Merged

ryota-murakami mentioned this issue Jul 7, 2021

We need regualr CRA maintainer #11180

Closed

serchserch mentioned this issue Jul 31, 2021

fix: stop watching for changes #11261

Closed

rayyildiz added a commit to rayyildiz/capture-tweet that referenced this issue Jul 14, 2023

fix facebook/create-react-app#9868

1170a68

4.0.0 breaks with typescript (all versions) #9868

4.0.0 breaks with typescript (all versions) #9868

Comments

benneq commented Oct 23, 2020 • edited Loading

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

iansu commented Oct 23, 2020

benneq commented Oct 23, 2020

iansu commented Oct 23, 2020

benneq commented Oct 23, 2020

iansu commented Oct 23, 2020

benneq commented Oct 23, 2020

iansu commented Oct 23, 2020

iansu commented Oct 23, 2020

benneq commented Oct 23, 2020

benneq commented Oct 23, 2020 • edited Loading

benneq commented Oct 23, 2020

benneq commented Oct 23, 2020 • edited Loading

jamesmfriedman commented Oct 23, 2020

jamesmfriedman commented Oct 23, 2020

benneq commented Oct 23, 2020

jamesmfriedman commented Oct 23, 2020 • edited Loading

NearHuscarl commented Oct 24, 2020

PupoSDC commented Oct 24, 2020

DenysVuika commented Oct 24, 2020

marceloclp commented Nov 23, 2020

DangoPlus commented Nov 26, 2020

cas8180 commented Nov 26, 2020

fjplaurr commented Nov 30, 2020

fishenal commented Dec 3, 2020

hongguang-alt commented Dec 5, 2020

Lukortech commented Dec 6, 2020

0x0000F1 commented Dec 8, 2020

thiago-anjos commented Jan 21, 2021

pierremouchan commented Jan 23, 2021

xorb commented Jan 24, 2021

pierremouchan commented Jan 25, 2021

HashemKhalifa commented Jan 25, 2021

mumairofficial commented Feb 3, 2021

ghost commented Feb 6, 2021

clemente-xyz commented Feb 9, 2021

Townsheriff commented Mar 15, 2021

joaoromeira commented Jul 16, 2021

serchserch commented Jul 31, 2021 • edited Loading

benneq commented Oct 23, 2020 •

edited

Loading

benneq commented Oct 23, 2020 •

edited

Loading

benneq commented Oct 23, 2020 •

edited

Loading

jamesmfriedman commented Oct 23, 2020 •

edited

Loading

serchserch commented Jul 31, 2021 •

edited

Loading