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

[shripada]

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.
#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.