如何在React应用间导出导入组件？解决App2导入App1 Header报错问题

问题原因 #

你当前的App1默认导出的是App组件（而非Header），但App2里用默认导入import Header from 'App1'，实际拿到的是App组件，因此触发“不存在默认导出”的错误（错误信息里的App2应为笔误，实际指向App1）。

解决方案 #

1. 调整App1的组件导出逻辑 #

要让App2能访问到Header组件，需在App1中显式导出它：

• 方式一：新增统一导出入口
  在App1的src目录下创建index.js，作为组件包的导出入口：

// src/index.js
import Header from './Header';
import App from './App';

// 命名导出Header，默认导出App
export { Header };
export default App;

• 方式二：在原App.js中追加导出
  若不想新增文件，直接修改App1的App.js：

import Header from './Header';

function App() {
  return (
    <div className="App">
      <Header text='hello' />
    </div>
  );
}

export default App;
export { Header }; // 新增此行，命名导出Header

2. 配置Rollup打包与package.json #

确保Rollup正确打包导出的组件，并在package.json中声明入口：

• 检查Rollup配置文件（如rollup.config.js），入口指向导出文件，输出支持ES模块和CommonJS：

// rollup.config.js
import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js', // 入口为导出组件的文件
  output: [
    {
      file: 'dist/index.js',
      format: 'cjs', // 兼容Node环境的CommonJS格式
      sourcemap: true
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm', // 兼容现代打包工具的ES模块格式
      sourcemap: true
    }
  ],
  external: ['react', 'react-dom'], // 不打包React依赖，避免重复加载
  plugins: [
    resolve(),
    babel({ babelHelpers: 'bundled', presets: ['@babel/preset-react'] })
  ]
};

• 修改App1的package.json，指定打包后的入口文件：

{
  "name": "App1", // 确保包名正确，npm link时使用此名称
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "files": ["dist"], // 发布时仅包含dist目录
  "scripts": {
    "build": "rollup -c" // 配置打包脚本
  }
}

3. 重新打包并更新npm link #

在App1目录下执行：

npm run build # 重新打包组件
npm link # 更新本地关联的包

4. 在App2中正确导入Header #

因为Header是命名导出，需使用大括号包裹的命名导入：

// App2的App.js
import { Header } from 'App1'; // 注意此处为命名导入

function App() {
  return (
    <div className="App">
      <Header text='new text' />
    </div>
  );
}

export default App;

额外注意事项 #

若遇到React重复加载问题（如控制台报Invalid hook call），可在App2的package.json中添加resolutions强制统一React版本：

{
  "resolutions": {
    "react": "^18.2.0", // 替换为你实际使用的React版本
    "react-dom": "^18.2.0"
  }
}

执行npm install即可生效。

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