Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript 4 support #9515

Closed
vikingair opened this issue Aug 21, 2020 · 30 comments
Closed

TypeScript 4 support #9515

vikingair opened this issue Aug 21, 2020 · 30 comments
Milestone

Comments

@vikingair
Copy link

vikingair commented Aug 21, 2020

Describe the bug

After updating to [email protected] with [email protected] (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 [email protected] 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
Copy link
Contributor

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

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

@rintaun
Copy link

rintaun commented Aug 25, 2020

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:

@mgcrea
Copy link

mgcrea commented Aug 26, 2020

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 [email protected]

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
Copy link
Contributor

levrik commented Sep 2, 2020

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.

@iansu iansu added this to the 4.1 milestone Sep 2, 2020
@tcatkins99
Copy link

tcatkins99 commented Sep 3, 2020

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
Copy link

xixixao commented Sep 6, 2020

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

@japalo
Copy link

japalo commented Sep 7, 2020

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
Copy link

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
Copy link

mgcrea commented Sep 7, 2020

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
Copy link

japalo commented Sep 8, 2020

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 [email protected]. 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
Copy link

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
Copy link

ppoulard commented Sep 29, 2020

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
Copy link

@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
Copy link
Contributor

sheepsteak commented Sep 29, 2020

@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
Copy link

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

@ryota-murakami
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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

@Aumeeb
Copy link

Aumeeb commented Oct 19, 2020

Describe the bug

After updating to [email protected] with [email protected] (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 [email protected] 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

@vikingair
Copy link
Author

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

@onionhammer
Copy link

Has anyone tried it with CRA 3.4.4 ?

@cduff
Copy link

cduff commented Oct 22, 2020

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
Copy link
Contributor

iansu commented Oct 23, 2020

Fixed in Create React App 4.0.

@kresli
Copy link

kresli commented Dec 6, 2020

I still can't use typescript 4.

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

@Semigradsky
Copy link

I still can't use typescript 4.

npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1" from [email protected]
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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests