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

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® Core™ 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

1. 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"
  },

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

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

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

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

[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/

[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",