Webpack 5+Babel构建的React组件发布后无法导入使用问题

核心错误原因 #

你的组件导出与导入方式不匹配：
src/index.js 中将组件包裹在一个对象里作为默认导出，但你在使用时采用的是命名导入语法。当执行 import {MyComponentFunction} from 'my-component' 时，无法找到对应的命名导出成员，最终拿到的是 undefined（或误拿默认导出的对象），React 尝试渲染无效类型时就会抛出该错误。

具体修复步骤 #

1. 修正导出与导入的匹配关系（二选一） #

方案A：保持命名导入

修改 src/index.js，使用命名导出：

import MyComponentFunction from './components/MyComponent'
export { MyComponentFunction }

此时你的原导入代码可以正常使用：

import {MyComponentFunction} from 'my-component'

方案B：改用默认导入

修改 src/index.js，直接默认导出组件本身：

import MyComponentFunction from './components/MyComponent'
export default MyComponentFunction

对应的导入代码要改为：

import MyComponentFunction from 'my-component'

2. 优化 Webpack 配置（可选但推荐） #

• 补充 UMD 模块的全局对象配置，避免跨环境兼容问题：

const path = require('path')

module.exports = {
 output: {
   path: path.join(__dirname, '/dist'),
   filename: 'index.bundle.js',
   libraryTarget: 'umd',
   globalObject: 'this' // 适配 Node.js 和浏览器环境的全局对象
 },
 // ...其余配置不变
}

• 生产环境建议替换 style-loader 为 mini-css-extract-plugin，分离 CSS 与 JS 打包：
  先安装依赖：

  npm install mini-css-extract-plugin --save-dev
  

  再修改 Webpack 规则：

  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  
  module.exports = {
    plugins: [new MiniCssExtractPlugin()],
    module: {
      rules: [
        // ...JS/JSX 规则不变
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader, // 替换 style-loader
            'css-loader'
          ],
          exclude: /node_modules/
        }
      ]
    }
  }
  

3. 清理冗余依赖 #

• 删除 dependencies 中的 react，已通过 peerDependencies 声明依赖，避免重复打包；
• 移除未使用的 @react-three/drei、@react-three/fiber、three 依赖（如果组件未用到）。

4. 重新构建发布 #

执行 npm run build 重新构建产物，然后重新发布到 NPM 即可。

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