Using the tsconfig file to configure the alias does not take effect

[VitaminCtea]

The project was generated using the create-react-app scaffolding, and the paths option was removed when I used the tsconfig.json file to configure the path alias! Then I tried to use the extends property in the tsconfig.json file to connect to the external path configuration file, but it didn't work either! Using the customize-cra plug-in in conjunction with the above configuration file does not take effect. How do I configure it? Why doesn't the scaffolding support?

React version: 16.13.1
react-scripts version: 3.4.1

{
  "extends": "./tsconfig.paths.json", // Subsequent configuration options
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

The tsconfig.paths. json path file configuration:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["src/*"],
      "actions/*": ["src/actions"],
      "api/*": ["src/api"],
      "common/*": ["src/common"],
      "components/*": ["src/components"],
      "containers/*": ["src/containers"],
      "helper/*": ["src/helper"],
      "icon/*": ["src/icon"],
      "reducers/*": ["src/reducers"]
    }
  }
}

Customize -cra configuration file:

const { override, addDecoratorsLegacy, addWebpackAlias } = require("customize-cra")
const path = require("path")

module.exports = override(
  addDecoratorsLegacy(),
  addWebpackAlias({
      "@": path.resolve(__dirname, 'src'),
      "actions": path.resolve(__dirname, 'src/actions'),
      "api": path.resolve(__dirname, 'src/api'),
      "common": path.resolve(__dirname, 'src/common'),
      "components": path.resolve(__dirname, 'src/components'),
      "containers": path.resolve(__dirname, 'src/containers'),
      "helper": path.resolve(__dirname, 'src/helper'),
      "icon": path.resolve(__dirname, 'src/icon'),
      "reducers": path.resolve(__dirname, 'src/reducers')
  })
)

Sample file contents:
import App from 'components/App'
Warning message:

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

Error message:

./src/index.tsx
Module not found: Can't resolve 'components/App' in 'D:\code\my-music\src'

Please help me thank you!

[lnwu]

And the hit "compilerOptions.paths must not be set (aliased imports are not supported)"
will disable your paths settings, so vscode will not detect it even it works with Customize -cra.

[VitaminCtea]

@lnwu The editor is webstorm! The problem has been resolved and you need to install react-app-rewired and configure both the ts path alias Settings and the webpack alias Settings

[lnwu]

Found that can do it just using baseurl in tscofig, so we can using

Import Button from "components"

that refs src/components

[VitaminCtea]

@lnwu If "src/" is added to each introduction, it is still not convenient, and it is better to use the shortest path. I am not sure why the create-react-app scaffolding removes the paths option when compiling, is this the default? For this reason, most people use react-app-rewired to change the path configuration!

[JounQin]

It is definitely bad to modify user's custom tsconfig.json without options!

I found a workaround:

Move current tsconfig.json to tsconfig.base.json, and add a new file tsconfig.json:

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

[3stacks]

@JounQin if I do what you proposed I get You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file when trying to import another .ts file.

Have you encountered this error?

[JounQin]

@3stacks I didn't get this error.

[fahamidev]

@VitaminCtea
This code worked for me.

stackoverflow.com
Click on me

[cseas]

create-react-app doesn't support path aliasing and probably won't for the near future.
Reference: #7795 (comment)

The best alternative right now is to define "baseUrl": "." and prefix imports with src
Example:

import { MyComponent } from "src/components"

[nateq314]

It is definitely bad to modify user's custom tsconfig.json without options!

I found a workaround:

Move current tsconfig.json to tsconfig.base.json, and add a new file tsconfig.json:

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

This worked for me! Used it for importing types from an adjacent package in a monorepo.

[stale]

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.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.