ESLint+TS+craco配置路径别名报错无法解析@someFolder模块

你的别名配置在多个环节存在书写错误，同时存在导入路径大小写不匹配问题，最终导致模块无法被正确解析，具体修复步骤如下：

1. 修复导入路径大小写不匹配问题 #

你报错信息中识别到的导入路径为 @SomeFolder/SomeComponent（Folder 首字母大写），但所有配置里定义的别名均为小写s开头的 @someFolder。类Unix系统、ESLint解析器、TypeScript默认严格区分路径大小写，这是直接触发报错的核心原因之一，所有导入语句必须和别名定义大小写完全一致：

// 错误写法
import SomeComponent from '@SomeFolder/SomeComponent';
// 正确写法
import SomeComponent from '@someFolder/SomeComponent';

2. 修复各配置文件的书写错误 #

2.1 ESLint配置错误 #

你在 import/resolver/alias 的map配置中，给@someFolder映射的路径末尾加了/*通配符，eslint-plugin-import的alias解析器不支持这种通配符写法，直接映射到目标目录即可，修正后的配置：

"map": [
  ["@", "./src"],
  ["@someFolder", "./src/components/SomeFolder"]
],
"extensions": [".ts", ".tsx", ".js", ".jsx", ".json"]

如果是TypeScript项目，更推荐安装eslint-import-resolver-typescript依赖，直接读取tsconfig里的paths配置，不需要重复维护两份别名映射，避免配置不一致，此时resolver配置可简化为：

"settings": {
  "import/resolver": {
    "typescript": {
      "project": "./tsconfig.json"
    },
    "node": {
      "paths": ["src"],
      "extensions": [".js", ".jsx", ".ts", ".tsx"]
    }
  }
}

2.2 craco.config.js配置错误 #

• 配置中重复定义了两次webpack和jest配置块，JS对象中重复key会被后者覆盖，虽然当前内容一致，但属于冗余无效配置，需要删除重复块。
• Jest的moduleNameMapper正则捕获组没有拼接捕获到的路径后缀，导入子文件时会直接映射到目录，找不到对应文件。

修正后的完整配置：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@convertor': path.resolve(__dirname, 'src/convertors'),
      '@someFolder': path.resolve(__dirname, 'src/components/SomeFolder'),
    },
  },
  jest: {
    configure: {
      moduleNameMapper: {
        '^@someFolder/(.*)$': '<rootDir>/src/components/SomeFolder/$1',
        '^@convertor/(.*)$': '<rootDir>/src/convertors/$1',
      },
    },
  },
};

2.3 tsconfig.paths.json配置错误 #

你当前配置中baseUrl设为src，但paths里的路径又以src/开头，会被解析为<项目根目录>/src/src/components/...的错误路径，两种修正方式二选一：

• 方式一：baseUrl设为项目根目录，paths配置不变

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

• 方式二：保留baseUrl为src，去掉paths里的src/前缀

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@someFolder/*": ["components/SomeFolder/*"],
      "@convertor/*": ["convertors/*"]
    }
  }
}

注意：必须保证根目录的tsconfig.json通过extends字段引入了tsconfig.paths.json，否则TypeScript不会读取该路径配置。

3. 配置生效操作 #

所有配置修改完成后，需要执行以下操作让配置生效：

• 全局搜索项目中所有@SomeFolder（大写S）的导入，统一修正为小写@someFolder
• 重启ESLint服务、开发服务，配置修改不会触发热更新，必须重启进程
• 如果仍有报错，删除node_modules/.cache目录清除构建缓存后重新启动

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