TypeScript 4 support

[vikingair]

Describe the bug

After updating to typescript@4.0.2 with react-scripts@3.4.1 (I also tried version 3.4.3 where I couldn't find any release notes) the following eslint error occurred:

Parsing error: Cannot read property 'map' of undefined

This happened only after deleting all of my node_modules and recreating the package-lock.json from scratch.

It seems to be related to @typescript-eslint/eslint-plugin. And I don't know why but the referenced versions in react-scripts seems to be very old. From react-scripts@3.4.1 package.json:

 "@typescript-eslint/eslint-plugin": "^2.10.0",
 "@typescript-eslint/parser": "^2.10.0",

Current versions of @typescript-eslint/eslint-plugin and @typescript-eslint/parser are as of now 3.9.1.

• Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
• npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm

[sheepsteak]

This should get fixed in the next release as react-scripts in master now requires newer versions:

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

Lines 34 to 35 in 7763737

	"@typescript-eslint/eslint-plugin": "^3.3.0",
	"@typescript-eslint/parser": "^3.3.0",

[rintaun]

does @babel/core also need to be updated to support TypeScript 4?

babel/babel#11760 added support in 7.11 and react-scripts has not updated:

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

Line 31 in 7763737

"@babel/core": "7.10.5",

[mgcrea]

Another bug related to typescript@>=4.0 support, it looks like the tsconfig.json loaded configuration is now frozen and readonly, I get errors when I try to use unsupported properties (like "paths").

Using react-scripts@4.0.0-next.77

yarn run v1.22.4
$ react-scripts start
/react-workspace/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:218
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'paths' of object '#<Object>'
    at verifyTypeScriptSetup (/react-workspace/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:218:43)
    at Object.<anonymous> (/react-workspace/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1251:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1272:10)
    at Module.load (internal/modules/cjs/loader.js:1100:32)
    at Function.Module._load (internal/modules/cjs/loader.js:962:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Looks like the this project will have to move away from hot-rewriting the configuration, which imo is a good thing as I quite dislike the forced rewrite, I think we should just warn that you are running an unsupported configuration.

[levrik]

Hitting the exact same issue after upgrading.
Locally everything was working fine but it started to fail on CI with the error message posted by @fdc-viktor-luft.

As it was locally working I've realized a few other issues. I was trying to use the new ??= syntax introduced with TypeScript 4.
First this yielded the following error by ESLint Line 53:3: Expected an assignment or function call and instead saw an expression @typescript-eslint/no-unused-expressions.
After silenting this warning I was just getting Module parse failed: Unexpected token (19:21) from Babel. So looks like Babel also has to be upgraded. So @rintaun is right here.
All dependencies were upgraded via yarn upgrade. I've also tried to delete node_modules and yarn.lock which resulted in the same issue.

After downgrading to TypeScript 3.9 again, the issue stays. I'm not fully sure if this is caused by TypeScript 4.0 anymore now. And I'm also stuck now. Also happening on CI.

Edit: Okay, this is really weird. After deleting node_modules a few times... it finally builds again but just on TypeScript 3.9 as originally reported.