React组件发布NPM报错：类型无效，预期字符串/类/函数却得到对象

1. 核对组件的导出逻辑 #

首先确认你的App.jsx是默认导出：

// App.jsx
import React from 'react';

const App = () => {
  return <div>My Published Component</div>;
};

export default App;

如果用的是命名导出（export const App = ...），则测试项目里的导入要改成import { App } from "publish"，否则默认导入会拿到undefined或空对象。

2. 确认入口文件的导出 #

作为包入口的index.js必须正确转发组件导出，不能只导入不对外暴露：

// index.js
import App from './App.jsx';

// 两种导出方式二选一：
export default App;
// 或者CommonJS格式（兼容更多环境）：
// module.exports = App;

这是最容易忽略的点——如果入口文件没有导出内容，打包后的模块自然没有可导入的对象。

3. 修正webpack打包配置 #

webpack的输出配置决定了模块能否被外部项目正确识别，必须添加library配置：

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    // 关键配置：让包支持多模块规范
    library: {
      type: 'umd',
    },
    clean: true,
  },
  // 排除React依赖，避免重复打包
  externals: {
    react: 'react',
    'react-dom': 'react-dom',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

没有library配置的话，webpack打包后的代码不会对外暴露导出内容，外部导入时只能拿到空对象。

4. 检查package.json的关键字段 #

确保main指向打包后的正确文件，同时配置files字段限定发布内容：

{
  "name": "publish",
  "version": "1.0.0",
  "main": "./dist/index.js",
  "files": ["dist"],
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  }
}

• main字段错误会导致导入的是不存在的文件，返回空对象
• peerDependencies声明React的兼容版本，提醒用户安装对应依赖

5. 重新构建并测试 #

修改完所有配置后，重新执行以下步骤：

npm run build
npm unlink # 清除旧的本地链接
npm link # 重新建立本地链接

回到测试项目，重新导入组件，确认是否能正常渲染。

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