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

Error when using new 'react-jsx' TypeScript transform #10144

Closed
dcsan opened this issue Nov 24, 2020 · 28 comments
Closed

Error when using new 'react-jsx' TypeScript transform #10144

dcsan opened this issue Nov 24, 2020 · 28 comments

Comments

@dcsan
Copy link

dcsan commented Nov 24, 2020

Describe the bug

start a vanilla project using the typescript template
open any file. you'll see an error like this this:

image

try to edit the tsconfig.json
image

but CRA overwrites the file every time it starts. Many bug reports on this ducking behavior

etc.

Did you try recovering your dependencies?

yes

Which terms did you search for in User Guide?

wtf does cra overwrite my tsconfig.json

Cannot use JSX unless the '--jsx' flag is provided.",

Environment

➜  tadmin git:(tadmin) ✗ npx create-react-app --info
npx: installed 67 in 4.641s

Environment Info:

  current version of create-react-app: 4.0.1
  running from /Users/dc/.npm/_npx/17244/lib/node_modules/create-react-app

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.14.9 - /usr/local/bin/npm
  Browsers:
    Chrome: 86.0.4240.198
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0.1
  npmPackages:
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    react-scripts: 4.0.1 => 4.0.1
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1 $ npx create-react-app my-app --template typescript
2 open vscode editor.

Expected behavior

can use typescript with CRA

Actual behavior

FFS
image

Reproducible demo

try with your own template

@dcsan
Copy link
Author

dcsan commented Nov 24, 2020

the --jsx bug is all over too

https://stackoverflow.com/questions/50432556/cannot-use-jsx-unless-the-jsx-flag-is-provided

I guess craco isn't working with CRA4 (yet?)
so the only way to use TS with CRA(4) seems to be to eject right now.

@rafgraph
Copy link
Contributor

rafgraph commented Nov 24, 2020

This is because VS Code the app hasn't updated to typescript v4.1 yet which has support for the new jsx transform. To fix this you need to tell VS Code to use the Workspace version of typescript (v4.1.2).

EDIT: while this works, there is a simpler solution (see below)
To fix this, while viewing a TS file, bring up the command pallet (cmd+shift+p) and type "select typescript version", select the option and then select "Use Workspace Version 4.1.2".

Side note, while CRA creates a package.json with "typescript": "^4.0.3", the actual installed version in node_modules is 4.1.2 (this should be fix by CRA as 4.0.3 is not compatible). So it probably makes sense to also update the typescript version in package.json.

Simpler solution:
If you just update the TS version in package.json to 4.1.2, VS Code will automatically use the workspace version because it knows its internal TS version is not compatible with the project. This way you don't end up with a .vscode/settings.json in your project.

As @asterikx pointed out, update package.json to:

"react-scripts": "^4.0.1",
"typescript": "^4.1.2"

@asterikx
Copy link

asterikx commented Nov 25, 2020

For me, it works after upgrading to "react-scripts": "^4.0.1":

"react-scripts": "^4.0.1",
"typescript": "^4.1.2"

@ianschmitz
Copy link
Contributor

This is an editor issue, and not specific to CRA from what i can tell. If you receive errors in npm start or npm run build, then you know you have an issue with CRA. The suggestion from #10144 (comment) should get you on the right path.

@ianschmitz ianschmitz changed the title CRA 4.0 doesn't function with typescript Error when using new 'react-jsx' TypeScript transform Nov 25, 2020
@ianschmitz ianschmitz pinned this issue Nov 25, 2020
@dcsan
Copy link
Author

dcsan commented Nov 25, 2020

@rafgraph thanks for the helpful tip! I can confirm the steps above fixed this.

VSCode also creates a project .vscode/settings.json file to control this setting, it might be useful to copy this into the repo when doing the setup, if it is a vscode specific setting.

{
  "typescript.tsdk": "node_modules/typescript/lib"
}

@Robbie-Cook
Copy link

God bless you @rafgraph

@sromocki
Copy link

sromocki commented Dec 4, 2020

I have
"react-scripts": "^4.0.1", "typescript": "^4.1.2"

Doing a react-scripts build changes my "jsx": "react" to "jsx": "react-jsx", failing the build.

eai04191 added a commit to eai04191/dododex-extension that referenced this issue Dec 5, 2020
navin-moorthy added a commit to timelessco/react-ts-template that referenced this issue Dec 7, 2020
@alecglen
Copy link

alecglen commented Dec 8, 2020

@sromocki right there with you. Any luck figuring it out?

@dcsan
Copy link
Author

dcsan commented Dec 9, 2020

did you guys try changing the setting in the VSCode IDE itself using the dropdown menu?
that seems failsafe, whereas modifying the settings.json seems a bit flaky sometimes.

@alecglen
Copy link

alecglen commented Dec 9, 2020

The "use workspace version 4.1.2" thing? Yeah, I did it through the UI.

@tomyreyes
Copy link

Adding this to tsconfig helped me.

  "include": [
    "./src/**/*.ts"
  ]

@danieloi
Copy link

had to restart vs code to get it working after following the simpler solution.

Restarting the TS server from the command palette wasn't enough

This is because VS Code the app hasn't updated to typescript v4.1 yet which has support for the new jsx transform. To fix this you need to tell VS Code to use the Workspace version of typescript (v4.1.2).

EDIT: while this works, there is a simpler solution (see below)
To fix this, while viewing a TS file, bring up the command pallet (cmd+shift+p) and type "select typescript version", select the option and then select "Use Workspace Version 4.1.2".

Side note, while CRA creates a package.json with "typescript": "^4.0.3", the actual installed version in node_modules is 4.1.2 (this should be fix by CRA as 4.0.3 is not compatible). So it probably makes sense to also update the typescript version in package.json.

Simpler solution:
If you just update the TS version in package.json to 4.1.2, VS Code will automatically use the workspace version because it knows its internal TS version is not compatible with the project. This way you don't end up with a .vscode/settings.json in your project.

As @asterikx pointed out, update package.json to:

"react-scripts": "^4.0.1",
"typescript": "^4.1.2"

@melindastanbery
Copy link

Adding this to tsconfig helped me.

  "include": [
    "./src/**/*.ts"
  ]

Is there another setting that will prevent module resolutions from being messed up? this gets rid of my compile issues but then all of my imports being resolved from src/* are listed as no longer found.

@Volene
Copy link

Volene commented Dec 19, 2020

After update VSCode to 1.52.1 version that error disappear.

@Cidrax
Copy link

Cidrax commented Jan 6, 2021

Same problem on WebStorms.

@YeonhaPark
Copy link

@sromocki have you found out any new updates on this? I am also getting this issue :(

@chrisbu
Copy link

chrisbu commented Jan 25, 2021

@Cidrax this answer on SO worked for me with intellij based IDEs - https://stackoverflow.com/a/65090491

In IDE settings:

ticking "Always download the most recent version of schemas" in Remote JSON Schemas.

@bineetNaidu
Copy link

Maybe your VS code is using built-in TS version. The problem i had is similar to this. view here

@mattcarpowich1
Copy link

maybe not recommended, but I updated the node_modules file directly.

node_modules > react-scripts > scripts > utils > verifyTypeScriptSetup.js

changed around line 154:

hasJsxRuntime && semver.gte(ts.version, '4.1.0-beta') ? 'react' : 'react',

@bineetNaidu
Copy link

Not The Best Way to solve this but surely something to look on 🤔 🤔 🤔

@iwosz
Copy link

iwosz commented Mar 16, 2021

For the record, I have the same error with TS version 4.2.3

OS: Windows 10
VS Code: 1.54.3

package.json:

"react": "^17.0.1",
"typescript": "^4.2.3",
"react-scripts": "4.0.3"

tsconfig.json:

"module": "esnext",
"moduleResolution": "node",
"jsx": "react-jsx",
...
"include": [
    "src",
    "./src/**/*.tsx"
]

.vscode/settings.json:

"typescript.tsdk": "node_modules\\typescript\\lib"

VS Code -> Use Workspace Version -> 4.2.3

And I still get:

Error: Cannot use JSX unless the '--jsx' flag is provided. ts(17004)

Restart VS Code or reopen project folder won't fix the problem. The error is related to a new version of React because when I change to "jsx": "react" the error disappears in VS Code. As You know CRA after build overrides tsconfig to original version "jsx": "react-jsx" 🙂 so my question is simple:

Is there any official fix for this problem in VS Code with TypeScript version ^4.3.2 and React version ^17?

@JivkoJelev91
Copy link

Any luck figuring it out?

@holtc
Copy link

holtc commented May 11, 2021

Is there any update on this?

@geoyws
Copy link

geoyws commented Jun 16, 2021

For those using Yarn Workspaces, you'll have to nohoist or resolutions your typescript via your package.json. It works for me now.

{
  "name": "root",
  "version": "1.0.0",
  "private": true,
  "repository": "https://gitlab.com/foo-product/foo-root.git",
  "license": "MIT",
  "author": "Foo Bar <foobar@baz.com>",
  "main": "index.js",
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**/babel**",
      "**/eslint**",
      "**/jest**",
      "**/webpack**",
      "**/type-graphql**"
    ]
  },
  "scripts": {
    "postInstall": "lerna bootstrap"
  },
  "resolutions": {
    "graphql": "^15.3.0",
    "typescript": "^4.3.2"
  }
}

@paddotk
Copy link

paddotk commented Jun 24, 2021

June 2021 and the problem still persists. I can't develop any React app at all because of this, and I don't see why CRA has to meddle with these configurations in the first place. PS I use Atom as my editor which does not add any own config file.
I tried updating typescript and react-scripts to those specific suggested versions, but alas...

@sasweb
Copy link

sasweb commented Jul 13, 2021

For me

"include": [
  "./src/**/*.ts*"
]

together with TS version >= 4.1.2 in package.json did the trick.

I guess just "./src/**/*.tsx" won't work when you have .ts files in your project (cc: @iwosz).

@geni94
Copy link

geni94 commented Jul 14, 2021

The interesting bit of this issue, is that the .tsx components load just fine. However, VSCode and WebStorm will throw an error when you add the file format, and will also throw another error when removing the .tsx format.

I fell on this error while adding TypeScript to an already-created React app [with create-react-app]. I am not sure if it wouldn't be an issue if you're building it with other tools/have complete control on Webpack resolvers and loaders, since as I mentioned, the app doesn't crash and the files are loaded and transpiled correctly.

Hope this helps somehow.

@johankson
Copy link

@rafgraph thanks for the helpful tip! I can confirm the steps above fixed this.

VSCode also creates a project .vscode/settings.json file to control this setting, it might be useful to copy this into the repo when doing the setup, if it is a vscode specific setting.

{
  "typescript.tsdk": "node_modules/typescript/lib"
}

This worked for me when the issue was that it compiled fine on npm start but when saving it failed (at recompile) with discussed issue.

Just adding this comment in case someone else ends up in the same rabbit hole!

My package.json for reference

     "react-scripts": "5.0.0",
      "typescript": "^4.6.2",

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

No branches or pull requests