Node 16.8 import强制加文件扩展名时ESLint报错如何解决？

报错原因 #

你遇到的报错来自airbnb-base依赖的eslint-plugin-import插件提供的import/extensions规则，Airbnb默认配置禁止相对路径导入时携带.js扩展名，和Node 16.8+原生ES Module要求相对导入必须携带完整扩展名的规范冲突。

最佳实践 #

直接调整import/extensions规则配置适配Node ESM规范即可，无需禁用整个规则，还可保留第三方包导入不带扩展名的校验能力：
在你现有ESLint配置的rules字段中新增对应配置即可，修改后的完整配置如下：

module.exports = {
  env: {
    node: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {
    'no-console': 'off',
    // 新增扩展名规则配置
    'import/extensions': ['error', 'ignorePackages', {
      js: 'always',
      mjs: 'always',
      cjs: 'always'
      // 如果项目包含ts、jsx、vue等其他类型文件，可按格式在此处追加对应扩展名配置
    }]
  },
};

参数说明：

• 第二个参数ignorePackages表示对第三方npm包的导入不需要强制校验扩展名，符合日常开发习惯
• 后续对象的键为文件扩展名，值设为always表示对应类型的本地文件相对导入必须携带扩展名，和Node原生ESM要求完全对齐。

过渡/临时解决方案 #

如果你的项目同时兼容CommonJS和ES Module，不需要全量应用扩展名规则，可以通过overrides配置仅对ESM模块生效：

module.exports = {
  // 原有其他配置保持不变
  overrides: [
    {
      // 按你的项目实际情况匹配ESM文件范围，比如仅匹配.mjs后缀、或者指定ESM目录下的js文件
      files: ['*.mjs', 'src/esm/**/*.js'],
      rules: {
        'import/extensions': ['error', 'ignorePackages', {
          js: 'always',
          mjs: 'always',
          cjs: 'always'
        }]
      }
    }
  ]
}

完全禁用对应规则（不推荐） #

如果不需要任何扩展名相关校验，可以直接关闭该规则：

rules: {
  // 其他原有规则保持不变
  'import/extensions': 'off'
}

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