How to configure react-script so that it doesn't override tsconfig.json on 'start'

Question

I\'m currently using create-react-app to bootstrap one of my projects. Basically, I\'m trying to set up paths in tsconfig.json by adding these to the default ts

Answer 1

I was able to do this by using advice from this issue.

Put the configuration options react scripts likes to remove in a separate file (e.g. paths.json) and reference it from tsconfig.json via the extends directive.

paths.json:

{
  "compilerOptions": {
  "baseUrl": "./src",
  "paths": {
    "interfaces/*": [ "common/interfaces/*"],
    "components/*": [ "common/components/*"],
    }
  }
}

tsconfig.json

{
  "extends": "./paths.json"
   ...rest of tsconfig.json
}

Answer 2

If you are using react-scripts 4.0.0 like me then all you need to do is remove the line (around line 160 on my end):

paths: { value: undefined, reason: 'aliased imports are not supported' }

from the file node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js

I was able to straight up add my baseUrl and paths config to my tsconfig.json file like so:

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

and finally compile and move on with my life.

Per usual, YMMV. Please test your stuff. This is obviously a hack but it worked for me so I'm posting here in case it helps someone.

Here's a patch if you feel like sharing with your team:

diff --git a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
index 00139ee..5ccf099 100644
--- a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
+++ b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
@@ -156,7 +156,8 @@ function verifyTypeScriptSetup() {
           : 'react',
       reason: 'to support the new JSX transform in React 17',
     },
-    paths: { value: undefined, reason: 'aliased imports are not supported' },
+    // Removed this line so I can add paths to my tsconfig file
+    // paths: { value: undefined, reason: 'aliased imports are not supported' },
   };

Answer 3

You can't and I am unsure when you will be able to. I have been trying to use baseUrl and paths so I can avoid relative imports but as you can see they are intentionally removing certain values. The "(yet)" is encouraging but (sigh) who knows when they will officially be supporting it. I recommend subscribing to this github issue to be alerted if/when this changes.

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

Answer 4

I had a similar issue to this general problem (CRA overwrites "noEmit": false in my tsconfig.json of a React library I'm working on where I have two separate builds, one for local development, and another to build the production library with typings). Simple solution: use sed in a postbuild script in the package.json. For example: In-place edits with sed on OS X .

{
    ...
    "scripts": {
        ...
        "postbuild": "sed -i '' 's/{THING CRA IS REPLACING}/{WHAT YOU ACTUALLY WANT}/g' tsconfig.json # CRA is too opinionated on this one.",
        ...
    }
    ...
}

This approach, however, is not cross-platform (unlike how rimraf is the cross-platform alternative to rm -rf).

Answer 5

Create React App does not currently support baseUrl. However there is a workaround...to setup baseUrl for both webpack and the IDE you have to do the following:

1. Create a .env file with the following code:

NODE_PATH=./

2. Create a tsconfig.paths.json file with the following code inside:

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

3. Add the following line to tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  ...
}