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

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!

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

[AleksandrHovhannisyan]

Is there at least a good reason for not allowing path aliases in CRA?