tsconfig.json gets reset after yarn start React app

Question

I created my React app with create-react-app app_name --typescript. Since Typescript doesn't support NODE_PATH. I'm trying to use baseUrl in tsconfig.json.

However, every time running yarn start after putting "baseUrl": "src" in "compilerOptions", the baseUrl gets gone. I feel like yarn start resets tsconfig.json.

How can I stop it to reset the file?

**tsconfig.json**
{
  "compilerOptions": {
    "target": "es6",
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": ["src"]
}

Check this out. It's working for me https://github.com/facebook/create-react-app/issues/5645#issuecomment-461999138 — Thu San, Feb 13 '19 at 07:31
See also https://stackoverflow.com/questions/53794875/how-to-configure-react-script-so-that-it-doesnt-override-tsconfig-json-on-star — Brian Burns, Apr 22 '19 at 14:07
https://stackoverflow.com/questions/53438548/tsconfig-json-gets-reset-after-yarn-start-react-app — Hamid Shoja, Sep 28 '21 at 05:51

score 17 · Accepted Answer · answered Nov 27 '19 at 12:42

There's a workaround.

Create a new file, say "base-tsconfig.json" and put the baseUrl config and paths in there. Those won't be overwritten by CRA.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Extend the main tsconfig.json file with your custom configuration

{
  "extends": "./base-tsconfig.json"
}

More info here.

score 3 · Answer 2 · answered Nov 24 '18 at 04:07

3

create-react-app currently removes the baseUrl property, I don't think paths are currently supported by them unfortunately :(

Read more here https://github.com/facebook/create-react-app/issues/5585

answered Nov 24 '18 at 04:07

natee.biz

89
1
6

To anyone who reads this solution, this is no longer true, please refer to this github pull request: https://github.com/facebook/create-react-app/pull/6656 which enabled set baseUrel from tsconfig/jsconfig – barshopen Sep 06 '20 at 14:17

Dani Vijay · Answer 3 · 2019-05-07T13:28:19.667

baseUrl issue is fixed in create-react-app 3. It now supports two values - node_modules(the default) and src (refer this comment)

Upgrade create-react-app using instructions in CHANGELOG.

Eg: if you want to upgrade from 2.1.x to 3.0.0,

npm install --save --save-exact react-scripts@3.0.0

or

yarn add --exact react-scripts@3.0.0

Note: I used to have both jsconfig.json and tsconfig.json, but it threw an error in the beginning. Removing jsconfig.json resolved the issue.

score 2 · Answer 4 · answered Aug 13 '21 at 22:41

Path aliases are not supported anymore

But you can do this now to directly import files relative to the src directory

go to your tsconfig.json file add baseUrl to be "."

"compilerOptions": {
    "baseUrl":".",
    ...

Then you will be able to directly import stuff relative to the src directory

import Myfile from "src/myfile.js"

This worked for me!

tsconfig.json gets reset after yarn start React app

4 Answers4

Linked