我使用react@17.0.2和typescript@4.5.2创建了一个新的React-typescript应用程序：
npx create-react-app my-app --template typescript
然后我决定像以前做过很多次的那样定义别名路径。我在我的应用程序的根目录中创建了tsconfig.paths.json。

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "components/*": ["/components/*"],
      "routes/*": ["/routes/*"],
      "constants/*": ["/constants/*"]
    }
  }
}

然后我将extend属性添加到tsconfig.json文件中：

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

另外，我安装了react-app-rewired@2.1.8并创建了config-override.js：

const path = require('path');

module.exports = function override(config) {
    config.resolve = {
        ...config.resolve,
        alias: {
            ...config.alias,
            'components': path.resolve(__dirname, 'src/components/*'),
            'routes': path.resolve(__dirname, 'src/routes/*'),
            'constants': path.resolve(__dirname, 'src/constants/*'),
        }
    }
    return config;
}

所以我重新打开我的IDE（VSCode）并运行npm start。我必须提到我在运行start命令之前更改了package.json中的脚本。

{
 .
 .
 .
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }
 .
 .
 .
}

运行start命令后，终端显示此消息，编译失败：

• 对tsconfig.json文件进行了以下更改：- 不能设置compilerOptions.paths（不支持别名导入）*
• 编译失败。

./src/App.tsx模块未找到：无法解析.......* 中的“组件”
所以我开始搜索这个问题来解决它.我发现了许多方法，我将在下面提到其中的一些：

***1.***转到您的jsconfig.json文件，并将基URL添加为“。”

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

然后就可以直接从src目录导入东西了

import Myfile from "src/myfile.js"

结果==〉不工作！
***2.***这个问题通过一个别名来解决，重新布线。安装react-app-rewire-alias，然后创建config-override.js文件：

const {alias, configPaths} = require('react-app-rewire-alias')

     module.exports = function override(config) {
      alias(configPaths())(config)
      return config
     }

结果==〉不工作！
***3.***使用craco@6.4.1包

1.安装craco和craco-aliasnpm install @craco/craco --save和npm i -D craco-alias
1.在根目录下创建tsconfig.paths.json

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

1.在tsconfig.json中扩展tsconfig.paths.json
{“extends”：“./tsconfig.paths.json”，//默认配置...}
1.在根目录下创建craco.config.js

const CracoAlias = require("craco-alias");

module.exports = {
   plugins: [
     {
        plugin: CracoAlias,
        options: {
           source: "tsconfig",
           // baseUrl SHOULD be specified
           // plugin does not take it from tsconfig
           baseUrl: "./src",
           /* tsConfigPath should point to the file where "baseUrl" and "paths" 
           are specified*/
           tsConfigPath: "./tsconfig.paths.json"
        }
     }
  ]
};

1.在package.json中，将"start": "react-scripts start"交换为"start": "craco start"

结果==〉不工作！

我很困惑，因为我以前多次使用别名路径，但现在它不起作用。我不想eject我的应用程序，但使用别名路径是有帮助的。