tsconfig.json gets overwritten the moment the CRA typescript project is closed and opened in VSCode

[shripada]

trafficstars

Describe the bug

All your changes to tsconfig.json in a CRA typescript project will be lost the moment you close and open your project in VSCode.

Note that, I do not run any commands like yarn start, etc yet.
tsconfig.json is automatically getting overwritten the moment project is closed and reopened!.

Which terms did you search for in User Guide?

I searched resetting tsconfig.json upon closing and opening CRA typescript project. All I could see is about recent issues where the tsconfig.json getting overwritten when we run npm run start.
https://github.com/facebook/create-react-app/issues/8614

Environment

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

System: OS: macOS 10.15.7 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Binaries: Node: 12.16.1 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Browsers: Chrome: 87.0.4280.67 Edge: Not Found Firefox: 83.0 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

VSCode Version: 1.51.1 Commit: e5a624b788d92b8d34d1392e4c4d9789406efe8f Date: 2020-11-11T01:11:34.018Z (2 wks ago) Electron: 9.3.3 Chrome: 83.0.4103.122 Node.js: 12.14.1 V8: 8.3.110.13-electron.0 OS: Darwin x64 19.6.0

Steps to reproduce

(Write your steps here:)

1. Create a project with template typescript like so:

npx create-react-app testts

2. Once the project is set up, open it in VSCode:

cd testts
code . 

The project opens in VSCode. and the package.json will look with these deps installed:

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4"
  },

3. Now simply modify the tsconfig.json. We shall change

"jsx": "react-jsx"   ==> "jsx" : "react" 

Save tsconfig.json. Observe that the changes are saved.

4. Now close the testts workspace and open again. Voila!, observe that tsconfig is quickly re created and overwritten with defaults, and see that the change we made:

"jsx": "react"

is reset back to the default:

"jsx": "react-jsx" 

Note that, we have not run any other commands like yarn start, etc. tsconfig.json is automatically getting overrwritten the moment project is closed and reopened!.

Also note that, if I delete node_modules and then make changes to tsconfig.json, close and open project, VSCode does not overwrite the tsconfig.json

Expected behavior

tsconfig.json file retains any changes made between closing and reopening of the project. VSCode does not automatically overwrite this file upon reopening.

Actual behavior

tsconfig.json gets overwritten when we close the project and open it again.

Reproducible demo

Please refer the project: https://github.com/shripada/testts

[denchen]

I noticed that when I build my project, I see:

The following changes are being made to your tsconfig.json file:
  - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)

But if it's set to "react-jsx" I get a bunch of errors with the following:

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

FWIW, I'm on Typescript 4.1.2. Is there a conflict here with the latest CRA & latest Typescript?

[shripada]

@denchen yes. it looks like that. Now if you use the quick fix feature to fix the error, and it will actually change the tsconfig.json to apply this fix:

"jsx": "react"

However, when you close the project and reopen, you will see that the tsconfig.json is reset automatically by VS Code!.

[RushaliNaik]

The changes made to tsconfig.json automatically gets reset as and when I close and reopen my vscode ! Strange that my changes are saved in the first go but later gets reset without any consent ! Seems to be a bug in the firstlook !

[shrivatsabhatp]

Even I noticed that when I reopen my project, tsconfig.json file automatically get resets by VS Code!.

I modify and save the tsconfig.json file "jsx": "react-jsx" ==> "jsx": "react"

But, when reopen the project, tsconfig.json is reset back to "jsx": "react-jsx"

[v-shrutii]

I am also facing same issue, tsconfig.json file is overwritten once I close and reopen the vscode project.

[kmayur16]

I modified and saved tsconfig.json file. But gets overwritten once i close and reopen VS Code!.

[MahammadMuneer]

Yes! I have the same issue

[shettyshubha21]

Facing the same issue. Once I close and reopen the VS Code the tsconfig.json file gets overwritten.

[Sushmitha-B]

Yes I'm facing the same issue since a while. Any modifications made to the tsconfig.json file will be reset to defaults once VScode is closed and reopened.

[PoojaUNair5]

I am facing same issue too! In my case, any changes made in tsconfig.json file is lost once my project in vscode is closed and reopened.

[sonali-01]

I am facing the same issue.I had done changes in my tsconfig.json file and saved them, but when the vscode is closed and reopened the changes that i had done were lost.

[Grishmagrao31]

I am facing the similar issue. When I reopen the Vscode the modification made in tsconfig.json gets lost.

[shreyask1416]

I am facing the same issue.Tsconfig.json file gets overwritten once I close and reopen the vscode project.

[Athreya21]

I am facing an issue, tsconfig.json file gets overwritten and modification made will be lost in the VScode project as and when i close and reopen

[vaishnavi-in14]

I am facing the same issue, tsconfig.json file is overwritten and changes made are lost once I close and reopen the project in vscode

[tomswales]

Happens in both VSCode and SublimeCode 3 - no possibility to persist "jsx": "react" after restarting of CRA server.

[kylewetton]

I don't even need to close and open VS Code, it will happen as I'm coding. I've seen it happen while the tsconfig.js file open in my view. Odd

[deminoth]

"typescript": "~4.0.0" and "jsx": "react" seems ok. Maybe CRA 4.0.x conflicts with Typescript 4.1.x

[yosefanajjar]

Setting DISABLE_NEW_JSX_TRANSFORM to ture in the .env seems to fix it, it's the last env variable on this page https://create-react-app.dev/docs/advanced-configuration/

[makx]

I'm facing a similar issue, but with the "compilerOptions" -> "paths". It looks like the problem is when project you run "npm start" or the "yarn start". After that you can rollback changes in the "tsconfig" file and force a change another file to fire a hot reload and everything works fine.

[rahulthewall]

I created a new project.

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

I navigated to the directory, installed the dependencies and then started the project. The webapp runs.

However, when I open the example app in VSCode, it gives me errors. See screenshot below.

Can we please get a fix for this?

[tsingwong]

I created a new project.

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

I navigated to the directory, installed the dependencies and then started the project. The webapp runs.

However, when I open the example app in VSCode, it gives me errors. See screenshot below.

Can we please get a fix for this?

Hey brother.

I just fix this.

Because the typescript version， you can see it here 。

I see your typescript perhaps used the vscode default version， so you can change typescript version to the create-react-app default version， just like this。

[jbutko]

Guys if you see an error Cannot use JSX unless the '--jsx' flag is provided. in sublime text it's probably the problem with TypeScript Plugin for Sublime Text. It looks like it's not maintained anymore, the typescript version stucks on 3.9.2 therefore all the problems with "jsx": "react-jsx" flag as it is supported on ts versions higher than 4.1. You need to point the plugin to your global 4.1.x version throuh Preferences->Settings->User. Add this line: "typescript_tsdk": "c:\\Users\\nameofuser\\AppData\\Roaming\\npm\\node_modules\\typescript\\lib" (replace nameofuser for your windows account name).

[myxit]

In my case I just wanted to set import alias for TS. Faced with the same issue.

fixed by ejecting the app.

[JethroCao]

Setting DISABLE_NEW_JSX_TRANSFORM to ture in the .env seems to fix it, it's the last env variable on this page https://create-react-app.dev/docs/advanced-configuration/

thanks,i set it,now it is correct

[givethemheller]

Here's your work around, but before I get there...

Dear Maintainers: Occasionally, people need to work around things by modifying aliases. Its a tsconfig file... its my config, not yours. It's committed code. If you don't like it, throw a warning, hell, even throw an error with an override flag. This is just dumb. Really wanna get aggressive? Write out a new fixed.tsconfig.json. That would get our attention.

Now, workaround.

create a tsconfig.base.json - add your changes there. In my case it was typing overrides because yup wasn't happy with what I was using.

{
  "compilerOptions": {
    "paths": {
      "*": [
        "../node_modules/@types/*", // types at package in my mono repo. Note, I set base url to ./src, so I need to back up a directory
        "../../../node_modules/@types/*", // types at the root of my mono repo
        "./*"
      ]
    }
  }
}

On your tsconfig.json, pull it in as an import.

{
  "extends": "./tsconfig.base.json",

[brandonwkipp]

Thank you @givethemheller !!! Your solution worked for me!

[rattrayalex]

That solution did not work for me, I'm not sure why not.

[tomatobybike]

Thank you @givethemheller !!! Your solution worked for me!

[chengluyu]

Can't believe that this issue is still not fixed...

[v0lume]

any updates on this?

[SudhanPlayz]

When there will be a fix on this issue?

When I add this property it gets removed on next restart.

[lcdennison]

TL;DR quick hack: In node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js, change

function verifyTypeScriptSetup() {

to

function verifyTypeScriptSetup() {
return;

Longer version:

As others have said here, this rewriting of tsconfig.json is a terrible decision for this package. Errors or warnings should be thrown, or even give an opt-in method to have it rewritten. Or at the VERY least, an opt-out flag to preserve the file as I have written it. I'm the developer, not react-scripts. Don't go randomly changing my configuration just because I ask you to start up the dev environment.

Anyway... like the OP, I needed jsx: react instead of jsx: react-jsx, but the react-scripts (CRA) package was constantly overwriting it every restart. The solution posted about using extends with a "base" file did not work for me. react-scripts will write the jsx: react-jsx value to tsconfig.json if it's not there (or not 'react-jsx'). Because of how the extends inheritance works in TypeScript, the effective value will always be what is written in the inheriting file, not the "base" file. So for me, CRA was still overwriting the value I needed.

That led me to my nuclear option (without ejecting)... neuter the script that runs this rewriting logic. It turned out to be extremely simple. The following is for react-scripts version 4.0.3, but should be very similar for most versions around there.

1. Open node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js.
2. Immediately after the function declaration function verifyTypeScriptSetup() { (line 60 for me), add a new line of return;.
3. Save file, start dev environment without issue. Enjoy CRA never rewriting your tsconfig.json again, regardless what options you are trying to override.

Of course, if you update react-scripts, reinstall, etc., you will have to repeat this change. But it's a super quick fix even then. If you rely on the integrity of that file as it exists in the package or have a build configuration that needs it, this may not be the solution for you. YMMV.

Note: The verifyTypeScriptSetup() function does more than just rewrite the config, but as far as I can tell, it doesn't do anything important other than try to ensure you didn't mess up your setup. const compilerOptions = { in that same file contains the logic for what gets rewritten, if you wanted to edit that to your liking and keep the rest.

[chengluyu]

@lcdennison Great explanation!

I’m also wondering if these lines should give us some information. But actually I’ve never seen it works.

https://github.com/facebook/create-react-app/blob/f0a837c1f07ebd963ddbba2c2937d04fc1b79d40/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js#L263-L285

[InfamousStarFox]

I found a StackOverflow question that points to a possibility that tsconfig.json is changed because of a higher version of TypeScript installed in the VS Code editor, than is in the project (workspace).

Microsoft has some documentation on how to target the workspace version instead of the VSCode version of TypeScript here: https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript

[AleColl]

Same problem, can't solve selecting the workspace version. In my case workspace has v4.4.4, while vscode has 4.4.3

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

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[beharefe]

Still having this issue. @givethemheller's solution doesn't work for me.

[1] The following changes are being made to your tsconfig.json file:
[1]   - compilerOptions.paths must not be set (aliased imports are not supported)

[shapeshifta78]

same here... Wanted to try esbuild :\