Reputation: 2031
I am facing a weird issue. Since yesterday my setup was working perfectly with a largish rails, react, and typescript project.
This morning, as I opened the editor, VS Code was suddenly broken. I now get error
[ts] Cannot use JSX unless the '--jsx' flag is provided
in all of my .tsx files. Even more surprisingly, compilation still works without issue.
This seems inline with the warning I am suddenly getting: Version mismatch! global tsc (2.0.7) != VS Code's language service (2.0.6). Inconsistent compile errors might occur
.
My directory structure is that of a rails project, plus the react_on_rails
gem. This means that I have a client
folder with a webpack installation, and inside the client
folder we find the tsconfig
file. tsconfig
contains the following:
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"module": "commonjs",
"target": "es6",
"jsx": "react",
"allowJs": true,
"allowSyntheticDefaultImports": true,
"isolatedModules": true,
"experimentalDecorators": true,
"maxNodeModuleJsDepth": 5
},
How do I go about debugging something like this?
Upvotes: 2
Views: 568
Reputation: 2031
For whomever might be interested, the solution was quite trivial.
I was using webpack, so the list of files in tsconfig.json
was not really needed: after all, webpack goes through the files it finds, matches extensions, and applies its loaders. Indeed, compilation worked correctly.
It appears that (not unreasonably) VS Code uses the files listed in tsconfig.json
to determine which files will receive intellisense according to the parameters specified in the tsconfig.json
file itself.
The solution was therefore simply to add references to all of my *.ts
and *.tsx
files in tsconfig.json
to restore intellisense to perfection.
Upvotes: 1