我有同样的问题，试图解决路径与别名和做的webpack配置已经看到在多个网站与tsconfig-paths-webpack-plugin，仍然不工作。

我也有同样的问题。
对此有什么解决办法吗？

2022年。React 18发布，CRA v5发布，存在nodejs导入选项，但不支持框中的别名=）

我使用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.不能设置路径（不支持别名导入）*
• 无法编译。

未找到./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.安装和安装
1.在根目录中创建tsconfig.paths.json

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

1.在tsconfig.json中扩展tsconfig.paths.json
{
“扩展”：“./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我的应用程序，但使用别名路径是有帮助的。
This is我在Stackoverflow社区中的问题。

删除所有*

在我的测试中，只需从别名中删除 *，无论是craco、react-app-rewired，根据webpack文档https://webpack.js.org/configuration/resolve/设置别名配置
在Craco：

webpack: {
    ...
    alias: {
      '@src': path.resolve(__dirname, 'src'),
    },
    ...
}

在React-应用-重新连接中

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;
}

使用Craco可能是一个短期的解决方案，但为什么它们不再开箱即用了呢？

我在下面的链接中找到了解决方案，你必须使用Craco软件包
Link的最大值

我必须将react-app-rewired和react-app-rewired-alias相加
然后按照我们的朋友在上面的@yatessss评论的同样的提示去做（谢谢你😄）
我的档案

tsconfig.paths.json
tsconfig.json
config-overrides.js

tsconfig.路径.json

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

tsocnfig.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",
    "experimentalDecorators": true
  },
  "include": [
    "src"
  ],
  "extends": "./tsconfig.paths.json" <<<<< import alias paths
}

配置覆盖.js

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

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

软件包.json

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

@charleston10
无法工作alias is not a function