使用Babel编译的自定义Node模块导入时报Element type invalid错误如何解决

核心原因 #

报错的根本原因是Babel转译ES模块为CommonJS规范后，ES命名导入和CommonJS导出的兼容问题。当你在Next.js（默认支持ES模块导入）中用import { FuncA } from '@myorg/hellow'导入CommonJS格式的npm包时，Node会将CommonJS的module.exports整体识别为ES模块的default导出，你需要的命名导出会被挂载到default属性下，直接解构得到undefined，把undefined作为组件渲染就触发了报错。
额外语法修正：你示例的导入语句缺少引号，正确写法为import { FuncA, FuncB, FuncC } from '@myorg/hellow'

解决方案（按优先级排序） #

方案1：添加Babel兼容插件（最稳妥，兼容所有导入场景） #

1. 安装babel-plugin-add-module-exports开发依赖：

npm install babel-plugin-add-module-exports --save-dev

2. 修改.babelrc配置，新增插件：

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["add-module-exports"]
}

该插件会自动把转译后的ES命名导出直接挂载到CommonJS的module.exports根对象上，不需要额外修改业务导出代码。

方案2：显式配置package.json导出规则 #

如果你的包只提供给Node 14.13及以上版本使用（支持package.json exports字段），可以直接在package.json中新增导出配置：

"main": "dist/index.js",
"exports": {
  ".": "./dist/index.js"
},
"type": "commonjs"

方案3：修改src/index.js导出写法 #

直接在聚合导出文件末尾新增兼容语句即可：

export { FuncA, FuncB } from './Fileone/Fileone.js';
export { FuncC } from './Filetwo/Filetwo.js';

// 新增CommonJS导出兼容代码
if (typeof module !== 'undefined') {
  module.exports = exports;
}

验证方法 #

修改完成后先本地测试再发布，避免重复发版：

• 在hellow模块根目录执行npm run build
• 执行npm link将本地包注册到全局
• 进入测试项目目录执行npm link @myorg/hellow关联本地包
• 测试项目中临时添加打印代码验证导出是否正常：

import * as hellow from '@myorg/hellow'
console.log(hellow) // 能直接看到FuncA、FuncB、FuncC属性即为修复成功

确认无误后重新发布npm包即可。

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