开启useESModules后@babel/runtime加.js后缀致Node16导出路径错误

问题重现 #

开启useESModules: true后，Babel生成的辅助代码会自动带上.js后缀：

import "@babel/runtime/helpers/esm/extends.js";

这会触发Node的导出路径匹配错误：

[ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './helpers/esm/extends.js' is not defined by "exports" in myproject/node_modules/@babel/runtime/package.json

根源是@babel/runtime的package.json中exports字段定义的子路径不带后缀：

"exports": {
  "./helpers/extends": [
    {
      "node": "./helpers/extends.js",
      "import": "./helpers/esm/extends.js",
      "default": "./helpers/extends.js"
    }
  ]
}

优雅解决方案（替代繁琐的sed脚本） #

方案1：升级@babel相关依赖 #

低版本的@babel/plugin-transform-runtime会在开启useESModules: true时生成带后缀的导入语句。将@babel/plugin-transform-runtime和@babel/runtime同时升级到7.20.0及以上版本，新版本会自动适配exports字段规则，生成不带.js后缀的导入，无需额外配置。

方案2：调整Babel插件配置 #

如果暂时无法升级依赖，可在Babel配置文件（如babel.config.json、.babelrc）中修改@babel/plugin-transform-runtime的配置，强制生成符合exports规则的导入路径：

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "useESModules": true,
        "moduleName": "@babel/runtime/helpers",
        "importHelpers": true,
        "absoluteRuntime": false
      }
    ]
  ]
}

方案3：用Babel插件移除导入后缀 #

如果以上方法不适用，可以借助第三方插件自动清理导入语句中的.js后缀：

1. 安装插件：

npm install babel-plugin-transform-remove-import-extensions --save-dev

2. 在Babel配置中添加插件：

{
  "plugins": [
    "@babel/plugin-transform-runtime",
    "transform-remove-import-extensions"
  ]
}

临时解决方案（原脚本优化） #

如果需要保留临时修复方式，可以将多个sed命令合并为一条，减少重复操作：

sed -i -e 's/extends.js/extends/g' -e 's/assertThisInitialized.js/assertThisInitialized/g' -e 's/inheritsLoose.js/inheritsLoose/g' -e 's/wrapNativeSuper.js/wrapNativeSuper/g' -e 's/taggedTemplateLiteralLoose.js/taggedTemplateLiteralLoose/g' ./dist/server/entry-server.js

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