Node.js使用ES6语法运行：如何省略import语句的.js后缀

问题背景 #

项目已在package.json中设置"type":"module"启用ESM语法，搭配Babel配置，但执行npm run dev时，import语句必须添加.js后缀，否则触发ERR_MODULE_NOT_FOUND错误，Node.js版本18.7.0。

报错信息：

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/nabeel.77.dev/Desktop/chat/graphql/resolvers' imported from /Users/nabeel.77.dev/Desktop/chat/server.js
Did you mean to import ../graphql/resolvers.js?
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:404:11)
    at moduleResolve (node:internal/modules/esm/resolve:965:10)
    at defaultResolve (node:internal/modules/esm/resolve:1173:11)
    at nextResolve (node:internal/modules/esm/loader:173:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:852:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:439:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v18.7.0
[nodemon] app crashed - waiting for file changes before starting...

项目package.json：

{
  "type": "module",
  "dependencies": {
    "apollo-server": "^3.10.0",
    "esm": "^3.2.25",
    "graphql": "^16.5.0",
    "mysql2": "^2.3.3",
    "sequelize": "^6.21.3"
  },
  "scripts": {
    "dev": "nodemon server.js --exec babel-node",
    "start": "node server.js"
  },
  "name": "chat",
  "version": "1.0.0",
  "main": "server.js",
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/node": "^7.0.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "nodemon": "^2.0.19",
    "rimraf": "^3.0.2"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

解决方案 #

1. 通过Babel插件自动补全后缀

利用babel-plugin-module-resolver让Babel在编译时自动识别并补全文件后缀：

• 安装依赖：

  npm install --save-dev babel-plugin-module-resolver
  

• 修改.babelrc配置，添加插件规则：

  {
    "presets": ["@babel/preset-env"],
    "plugins": [
      [
        "module-resolver",
        {
          "extensions": [".js", ".json"]
        }
      ]
    ]
  }
  

修改后重启npm run dev，即可省略.js后缀进行import。

2. 使用Node.js实验性解析参数

Node.js ESM默认严格要求后缀，可通过实验性参数切换为CommonJS风格的自动补全解析：
修改package.json中的dev脚本：

"dev": "nodemon server.js --exec babel-node --experimental-specifier-resolution=node"

注意：该参数为实验性特性，生产环境谨慎使用。

3. 清理冗余依赖避免冲突

项目中同时存在esm包和官方ESM配置"type":"module"，两者可能冲突，建议移除esm依赖：

npm uninstall esm

清理后结合上述任一方案即可正常使用无后缀import。

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