-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
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
Comments
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?) |
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) Side note, while CRA creates a Simpler solution: As @asterikx pointed out, update
|
For me, it works after upgrading to "react-scripts": "^4.0.1",
"typescript": "^4.1.2" |
This is an editor issue, and not specific to CRA from what i can tell. If you receive errors in |
@rafgraph thanks for the helpful tip! I can confirm the steps above fixed this. VSCode also creates a project {
"typescript.tsdk": "node_modules/typescript/lib"
} |
…sing-the-workspace-version-of-typescript facebook/create-react-app#10144 ^ Fix for the newest version of react 17 and "react-jsx" tag.
God bless you @rafgraph |
I have Doing a react-scripts build changes my "jsx": "react" to "jsx": "react-jsx", failing the build. |
@sromocki right there with you. Any luck figuring it out? |
did you guys try changing the setting in the VSCode IDE itself using the dropdown menu? |
The "use workspace version 4.1.2" thing? Yeah, I did it through the UI. |
Adding this to tsconfig helped me.
|
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
|
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. |
After update VSCode to 1.52.1 version that error disappear. |
Same problem on WebStorms. |
@sromocki have you found out any new updates on this? I am also getting this issue :( |
@Cidrax this answer on SO worked for me with intellij based IDEs - https://stackoverflow.com/a/65090491 In IDE settings:
|
Maybe your VS code is using built-in TS version. The problem i had is similar to this. view here |
maybe not recommended, but I updated the node_modules file directly. node_modules > react-scripts > scripts > utils > verifyTypeScriptSetup.js changed around line 154:
|
Not The Best Way to solve this but surely something to look on 🤔 🤔 🤔 |
For the record, I have the same error with TS version 4.2.3 OS: Windows 10 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:
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? |
Any luck figuring it out? |
Is there any update on this? |
For those using Yarn Workspaces, you'll have to {
"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"
}
} |
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. |
For me
together with TS version >= 4.1.2 in package.json did the trick. I guess just |
The interesting bit of this issue, is that the 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. |
This worked for me when the issue was that it compiled fine on Just adding this comment in case someone else ends up in the same rabbit hole! My
|
Describe the bug
start a vanilla project using the typescript template
open any file. you'll see an error like this this:
try to edit the
tsconfig.json
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
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
Reproducible demo
try with your own template
The text was updated successfully, but these errors were encountered: