React组件库NPM包多组件默认导出问题求助

我用create-react-library创建了一个React组件库，初始只有一个组件时发布到NPM运行正常。但添加第二个组件后，入口文件index.js无法导出多个组件——只能默认导出单个组件/函数，非默认导出不生效。尝试了多种写法都没解决，求帮助。

目录结构 #

src目录下有index.js入口文件，components文件夹包含Button和Pagination两个组件子目录，每个组件目录有各自的实现文件。

尝试过的写法及问题 #

写法1：默认导出对象 #

import Button from "./components/Button";
import Pagination from "./components/Pagination";

export default {Button, Pagination}

❌ 不生效，无法正确导入组件。

写法2：CommonJS导出 #

import Button from "./components/Button";
import Pagination from "./components/Pagination";
module.exports= {
    Button: Button,
    Pagination: Pagination
}

❌ 出现默认导出错误。

写法3：命名导出重定向 #

export {default as Button} from './components/Button';
export {default as Pagination} from './components/Pagination';

❌ 仍出现相同的默认导出错误。

配置文件 #

package.json #

{
  "name": "exampledemo3",
  "version": "1.0.0",
  "description": "Made with create-react-library",
  "license": "MIT",
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.js",
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "build": "microbundle-crl --no-compress --format modern,cjs",
    "start": "microbundle-crl watch --no-compress --format modern,cjs",
    "prepare": "run-s build",
    "test": "run-s test:unit test:lint test:build",
    "test:build": "run-s build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "predeploy": "cd example && npm install && npm run build",
    "deploy": "gh-pages -d example/build"
  },
  "peerDependencies": {
    "react": "^18.2.0"
  },
  "devDependencies": {
    "microbundle-crl": "^0.13.10",
    "babel-eslint": "^10.0.3",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^3.4.1"
  },
  "files": [
    "dist"
  ]
}

.eslintrc #

{
  "parser": "babel-eslint",
  "extends": [
    "standard",
    "standard-react",
    "plugin:prettier/recommended",
    "prettier/standard",
    "prettier/react"
  ],
  "env": {
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 2020,
    "ecmaFeatures": {
      "legacyDecorators": true,
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "16"
    }
  },
  "rules": {
    "space-before-function-paren": 0,
    "react/prop-types": 0,
    "react/jsx-handler-names": 0,
    "react/jsx-fragments": 0,
    "react/no-unused-prop-types": 0,
    "import/export": 0
  }
}

解决方案 #

1. 确认组件自身导出规范 #

先检查Button和Pagination组件是否为默认导出：

// src/components/Button/Button.jsx
const Button = () => { /* 组件逻辑 */ };
export default Button;

如果组件是命名导出，入口文件的导出写法需要对应调整。

2. 入口文件使用混合导出 #

同时支持命名导入和默认导入，写法如下：

import Button from './components/Button';
import Pagination from './components/Pagination';

// 命名导出（推荐使用）
export { Button, Pagination };
// 可选：添加默认导出，支持整体导入
export default { Button, Pagination };

3. 清理并重新构建 #

microbundle可能存在缓存问题，清理dist目录后重新构建：

rm -rf dist && npm run build

4. 使用正确的导入方式 #

在测试项目中采用对应的导入写法：

// 命名导入（推荐）
import { Button, Pagination } from 'exampledemo3';

// 默认导入
import ExampleLib from 'exampledemo3';
const { Button, Pagination } = ExampleLib;

5. 修复ESLint配置 #

你的.eslintrc关闭了import/export规则，可能导致语法错误无法被检测到，建议开启该规则排查问题：

"rules": {
  // 其他规则保持不变
  "import/export": 2
}

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