React项目配置导入别名后重启Dev Server不生效的排查求助

核心排查点：react-scripts的配置隔离 #

你使用的react-scripts@5.0.1是Create React App（CRA）官方脚手架工具，默认不会读取项目根目录下自定义的webpack.config.js或.babelrc——CRA将所有配置封装在内部，除非执行eject暴露配置，或使用react-app-rewired、craco这类工具覆盖默认配置，这是你修改配置后不生效的最可能原因。

分步调试与解决 #

1. 用craco接管CRA配置 #

如果未执行过npm run eject，自定义配置文件不会被加载，需用craco覆盖默认配置：

• 安装依赖：npm install @craco/craco --save-dev
• 在项目根目录创建craco.config.js，配置别名：

  const path = require('path');
  module.exports = {
    webpack: {
      alias: {
        '@assets': path.resolve(__dirname, 'src/Assets'),
        '@components': path.resolve(__dirname, 'src/components')
      }
    },
    typescript: {
      enableTypeChecking: true
    }
  };
  

• 修改package.json的启动脚本：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  

2. 同步tsconfig.json配置 #

保留以下配置，确保TypeScript编译与VSCode识别统一：

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

3. 按需配置Babel（可选） #

若依赖module-resolver插件，直接在craco.config.js中添加Babel配置，无需单独.babelrc：

module.exports = {
  // ...webpack配置
  babel: {
    plugins: [
      [
        'module-resolver',
        {
          root: ['./src'],
          alias: {
            '@assets': './Assets',
            '@components': './components'
          }
        }
      ]
    ]
  }
};

4. 清除缓存并重启 #

• 启动前清除CRA缓存：npm start -- --reset-cache
• 完全关闭Dev Server进程（含终端窗口）后重新启动，避免缓存残留。

5. 验证导入语法匹配 #

确保导入语句与文件导出一致：

• 若src/components/Master/Dropdown/index.js的导出为export {default as Dropdown} from './Dropdown';，正确导入方式为：

  import { Dropdown } from '@components/Master/Dropdown';
  

  （此处导出的是具名Dropdown，而非默认导出）

6. 检查路径大小写 #

注意操作系统大小写敏感性：

• tsconfig中@assets映射的是Assets/*（首字母大写），需确保实际文件夹名为Assets而非assets——Linux/macOS区分大小写，Windows不区分，但跨平台环境下可能导致识别异常。

内容的提问来源于stack exchange，提问作者Sebastien Bolh