迁移Next.js到SWC编译器后，ESLint无法解析别名模块路径

SWC如何识别~/~~别名 #

Next.js SWC编译器不再依赖Babel插件处理导入别名，它会直接读取项目根目录下tsconfig.json（TypeScript项目）或jsconfig.json（JavaScript项目）中compilerOptions.paths的配置。你需要把原Babel里的别名规则迁移到这个文件中，SWC就能自动识别并解析这些别名。

修复ESLint报错的步骤 #

1. 配置tsconfig.json/jsconfig.json #

在项目根目录的配置文件中添加baseUrl和paths，对应原有的别名规则：

{
  "compilerOptions": {
    // 保留原有其他配置
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"],
      "~~/*": ["./*"]
    }
  }
}

注意：baseUrl必须设置为.，否则paths中的路径无法正确映射到项目根目录。

2. 更新ESLint解析器配置 #

你已经移除了babel-module解析器，需要使用能读取tsconfig.json/jsconfig.json路径配置的解析器，让ESLint识别别名。推荐安装eslint-import-resolver-typescript（TypeScript/JavaScript项目通用）：

npm install eslint-import-resolver-typescript --save-dev

然后修改.eslintrc中的settings部分：

settings: {
  'import/resolver': {
    'typescript': {
      'project': ['./tsconfig.json'] // 若为JS项目，替换为'./jsconfig.json'
    },
    'node': {
      'extensions': ['.js', '.ts', '.tsx']
    }
  }
}

3. 验证修复效果 #

重启编辑器的ESLint服务，或在终端运行npx eslint .检查代码，import/no-unresolved的报错应该会消失。

备选方案（无需依赖TS/JS配置文件） #

如果不想通过配置文件统一管理别名，也可以用eslint-import-resolver-alias直接在ESLint中定义规则：

1. 安装依赖：

npm install eslint-import-resolver-alias --save-dev

2. 修改.eslintrc：

settings: {
  'import/resolver': {
    'alias': {
      'map': [
        ['~', './src'],
        ['~~', './']
      ],
      'extensions': ['.js', '.ts', '.tsx']
    },
    'node': {
      'extensions': ['.js', '.ts', '.tsx']
    }
  }
}

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