TypeScript 4 support

[fdc-viktor-luft]

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.

[tcatkins99]

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.

I found that when I had to downgrade back to 3.9 that just deleting the .cache folder from node_modules did the trick.

[xixixao]

Would be nice to add a workaround to the CRA website while the default typescript support is broken on fresh installs.

[japalo]

I am asking here since this is really hard to find any information about, but it seems to be related to TypeScript 4.
When i am trying to integrate my own .eslintrc.js i am getting the following errors;

./src/App.tsx
  Line 1:1:    Definition for rule '@typescript-eslint/no-redeclare' was not found  @typescript-eslint/no-redeclare
  Line 1:1:    Definition for rule '@typescript-eslint/no-shadow' was not found     @typescript-eslint/no-shadow

If anyone has any pointers where i can find a solution for this, or workaround for that matter, i would be ever so grateful.

[JohannesKlauss]

The workaround is either to eject, to force the field resolution (which only seems to work with npm and not with yarn, but I might be wrong on this) or use a version < 4

[mgcrea]

My current workaround to use TypeScript 4+ is to use react-app-rewired and insert this NodeJS module highjack on top of the file:

// Hacky way to disabled picky typescript setup verification
const originalModuleLoad = Module._load;
Module._load = function (request, parent) {
  const originalReturn = originalModuleLoad.apply(this, arguments);
  if (request.includes('verifyTypeScriptSetup')) {
    return () => {};
  }
  return originalReturn;
};

Bonus with that is that you can finally use the tsconfig "paths" option that is damn useful for monorepos.

eg.

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"],
      "@foobar/library": ["./../library/src"],
      "@foobar/library/*": ["./../library/src/*"]
    }
  },

[japalo]

The workaround is either to eject, to force the field resolution (which only seems to work with npm and not with yarn, but I might be wrong on this) or use a version < 4

I got it to work with yarn when downgrading to typescript@3.7.2. I also had to downgrade some other packages in order for eslint to work properly. If anyone else gets the same errors i had, try to downgrade your packages for typescript eslint stuff as well, or simply just don't use eslint until all packages have support for typescript >= 4.x.x.

NOTE: this is not a fix to the problem, is a way to work around it. The real fix is patience and gratitude to those who create these awesome packages for us :)

[ppoulard]

Still failing from a fresh install :

npx create-react-app my-app --template typescript
npm start

it works so far

npm i typescript@latest

then I had a weird error that I fixed with

npm i

then I update App.tsx :

// before function App()
type Tuple = [string, string];
const t: Tuple[] = [['a', 'b']]
// and within function App() :
          { t.map(([a, b]) => <>{a}{b}</>)}

Result :

Failed to compile.

./src/App.tsx
  Line 0:  Parsing error: Cannot read property 'map' of undefined

[ppoulard]

Curiously, when I change to :

const t = [['a', 'b']] as const

it works, but when I add the type :

type Tuple = [string, string];
const t = [['a', 'b']] as const

it fails :( whereas it is not used

[dsherret]

@ppoulard this bug will only happen when using tuple types. In TypeScript’s Compiler API they renamed the property to access a tuple type’s type nodes so the code being executed here is referencing the old property name.

So that said, this bug can be worked around by not using tuple types, but that may not be feasible or desired in many cases.

[sheepsteak]

@ppoulard, you're still using the stable version of CRA that was released some time ago and does not support TypeScript 4.

You can try out the CRA@4 alpha by doing this:

npx create-react-app@next test-app --scripts-version react-scripts@next --template typescript --use-npm
npm i -S typescript@latest

I added your code and it worked fine.

[ppoulard]

Thanks, I will wait for the stable release then !
I hope it will come soon ;)

[ryota-murakami]

By the way, where is CRA v3.4.3 release?
Actual latest is v3.4.3 but Github still showing v3.4.1 as a latest release.
https://github.com/facebook/create-react-app/releases/tag/v3.4.1

[sheepsteak]

By the way, where is CRA v3.4.3 release?
Actual latest is v3.4.3 but Github still showing v3.4.1 as a latest release.
https://github.com/facebook/create-react-app/releases/tag/v3.4.1

@ryota-murakami, I don't think they made a GitHub release. The changes are in here though (3.4.2 & 3.4.3):

https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md

[ryota-murakami]

@sheepsteak Thanks!
I haven't expected only change log update even duplicate management of CHANGELOG.md and Github release is not cool though. 🤔

[Aumeeb]

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

Have you solved this issue? I want to upgrade Typescript >=4.x

[fdc-viktor-luft]

I decided to wait for CRA v4 😬 and privately I'm playing around with different solutions like Next JS.

[onionhammer]

Has anyone tried it with CRA 3.4.4 ?

[cduff]

Has anyone tried it with CRA 3.4.4 ?

@onionhammer I tried it yesterday and still got the same error. 3.4.4 just bumped resolve-url-loader to resolve an npm audit issue.

[iansu]

Fixed in Create React App 4.0.

[kresli]

I still can't use typescript 4.

npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1" from react-scripts@4.0.1
npm ERR! node_modules/react-scripts
npm ERR!   dev react-scripts@"^4.0.1" from the root project

[Semigradsky]

I still can't use typescript 4.

npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1" from react-scripts@4.0.1
npm ERR! node_modules/react-scripts
npm ERR!   dev react-scripts@"^4.0.1" from the root project

Temporary solution: npm i --legacy-peer-deps

It was fixed in #9964

[casperOne]

For those that are upgrading:

• From TS 3.* to 4.*
• React 16.* to 17.*

And are having the compiler throw up on everything, I checked my package.json; my CRA install is probably from 2.0, so I tried an empty install and noticed the following was in package.json which I hadn't noticed before:

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

Putting that in (in addition to upgrading all libraries as well as the jsx directive in the tsconfig file) was the piece that was missing to successfully compile the app.