React配置jsconfig.json设置路径别名后@constants导入报错如何解决？

核心报错原因 #

jsconfig.json的paths配置仅用于编辑器/IDE的代码路径提示，不会被webpack等构建工具自动识别，构建工具未配置对应的别名规则，是编译失败的最常见诱因。其余可能的原因还包括配置修改后未重启开发服务、路径指向匹配规则不正确。

具体解决步骤 #

步骤1：同步构建工具的别名配置 #

根据你使用的项目脚手架选择对应配置方式：

• 未eject的create-react-app项目
  推荐使用craco覆盖webpack配置，无需eject项目：
  1. 安装依赖：
     npm install @craco/craco craco-alias -D
  2. 项目根目录新建craco.config.js，写入以下配置：

  const CracoAlias = require('craco-alias');
  
  module.exports = {
    plugins: [
      {
        plugin: CracoAlias,
        options: {
          source: 'jsconfig',
          baseUrl: '.',
        },
      },
    ],
  };
  

  3. 修改package.json中的scripts字段，将react-scripts替换为craco：

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

• 已eject的CRA项目/自定义webpack配置项目
  直接在webpack配置文件的resolve字段中添加别名即可：

  const path = require('path');
  module.exports = {
    // 其余配置保持不变
    resolve: {
      alias: {
        '@components': path.resolve(__dirname, 'src/components'),
        '@actions': path.resolve(__dirname, 'src/actions'),
        '@constants': path.resolve(__dirname, 'src/constants'),
        '@services': path.resolve(__dirname, 'src/services'),
        '@assets': path.resolve(__dirname, 'src/assets'),
      },
      extensions: ['.js', '.jsx', '.json']
    }
  }
  

步骤2：优化jsconfig.json配置 #

调整配置规则，避免路径匹配异常：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@actions/*": ["src/actions/*"],
      "@constants": ["src/constants"],
      "@constants/*": ["src/constants/*"],
      "@services/*": ["src/services/*"],
      "@assets/*": ["src/assets/*"]
    }
  },
  "include": ["src"]
}

步骤3：重启开发服务 #

所有配置修改完成后，必须关闭当前开发服务重新启动，配置才会生效，重启后编译报错即可消失。

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