升级至Webpack 5后无法从Storybook产物导入私有NPM包

我们使用Storybook（6.5.8）构建并测试组件库，推送至Chromatic及私有NPM仓库，此前一切正常。近期因OpenSSL新漏洞开展安全审计，通过Dependabot更新所有包修复漏洞，适配Webpack 5后，GitHub Actions及Storybook运行正常，但将该NPM包导入项目时页面空白，无法渲染任何组件，控制台报错：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

发布流程及Storybook运行无报错，回滚至Webpack更新前版本则一切正常，切换到Webpack 5就会崩溃。需保留更新后的包规避漏洞，同时解决该问题。

当前组件库依赖如下：

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@pix4d/three-potree-loader": "^0.0.8",
    "@storybook/client-api": "^6.5.8",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@tippyjs/react": "^4.2.6",
    "chart.js": "^3.9.1",
    "chartjs-adapter-moment": "^1.0.0",
    "chartjs-plugin-zoom": "^1.2.1",
    "echarts": "^5.3.3",
    "echarts-for-react": "^3.0.2",
    "esri-loader": "^3.6.0",
    "esri-loader-hooks": "^0.4.0",
    "formik": "^2.2.9",
    "glob": "^8.0.3",
    "lodash.orderby": "^4.6.0",
    "moment": "^2.29.4",
    "polished": "^4.1.1",
    "prettier": "^2.6.2",
    "proj4": "^2.8.0",
    "react": "^17.0.1",
    "react-chartjs-2": "^4.3.1",
    "react-dom": "^17.0.1",
    "react-inner-image-zoom": "^3.0.2",
    "react-loading-skeleton": "^3.1.0",
    "react-moment": "^1.1.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-select": "^5.4.0",
    "react-spinners": "^0.13.4",
    "sass": "^1.50.1",
    "styled-components": "^5.2.1",
    "tippy.js": "^6.3.7",
    "web-vitals": "^1.0.1",
    "yup": "^0.32.11"
  },
  
  "devDependencies": {
    "@babel/cli": "^7.17.6",
    "@storybook/addon-a11y": "^6.5.8",
    "@storybook/addon-actions": "^6.5.8",
    "@storybook/addon-essentials": "^6.5.8",
    "@storybook/addon-interactions": "^6.5.8",
    "@storybook/addon-links": "^6.5.8",
    "@storybook/builder-webpack5": "^6.5.8",
    "@storybook/client-api": "^6.5.8",
    "@storybook/jest": "^0.0.10",
    "@storybook/manager-webpack5": "^6.5.8",
    "@storybook/node-logger": "^6.5.8",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.8",
    "@storybook/testing-library": "^0.0.11",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "auto": "^10.36.5",
    "babel-plugin-styled-components": "^2.0.7",
    "case-sensitive-paths-webpack-plugin": "^2.4.0",
    "chromatic": "^6.5.4",
    "copy-webpack-plugin": "^6.4.1",
    "cross-env": "^7.0.3",
    "html-webpack-plugin": "^4.5.2",
    "lodash.orderby": "^4.6.0",
    "npm-prepare-dist": "^0.3.0",
    "polished": "^4.1.1",
    "prettier": "^2.6.2",
    "react-scripts": "5.0.1",
    "sass-loader": "^9.0.2",
    "styled-components": "^5.2.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "5",
    "webpack-babel-env-deps": "1.5.0",
    "webpack-cli": "^4.10.0"
  }

1. 检查组件导出规范 #

• 确认组件库内所有组件的导出方式统一：若用export default MyComponent，导入时需对应import MyComponent from 'your-lib'；若为命名导出export const MyComponent，导入时需用import { MyComponent } from 'your-lib'。Webpack 5对ES模块导出的解析更严格，混合导出易导致解析异常。

2. 修正Webpack打包配置 #

• 确保output配置适配多环境导入需求，推荐设置：

  output: {
    filename: 'index.js',
    library: 'your-component-lib',
    libraryTarget: 'umd',
    globalObject: 'this'
  }
  

• 禁用Webpack 5的outputModule实验特性，避免输出仅支持ES模块的产物：

  experiments: {
    outputModule: false
  }
  

3. 调整Babel配置 #

• 确保@babel/preset-env的modules设为false，保留ES模块语法供Webpack处理：

  {
    "presets": [
      ["@babel/preset-env", { "modules": false }],
      "@babel/preset-react"
    ]
  }
  

• 验证babel-plugin-styled-components版本与styled-components版本匹配，避免样式组件导出结构异常。

4. 优化依赖声明 #

• 将react、react-dom等核心依赖移至peerDependencies，避免组件库打包时重复打包这些依赖，防止与项目中的版本冲突：

  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
  }
  

5. 排查第三方依赖兼容性 #

• 检查组件库中第三方依赖（如react-chartjs-2、echarts-for-react）是否兼容Webpack 5，部分旧版本依赖可能存在导出逻辑问题，尝试升级至最新兼容版本。
• 确认依赖版本匹配：比如react-chartjs-2 v4.x需搭配chart.js v3.x，避免版本不兼容导致的组件解析错误。

6. 本地调试验证 #

• 用npm link将本地组件库链接到测试项目，通过Chrome DevTools的Sources面板查看导入的组件是否为预期的函数/类，而非对象。
• 直接查看组件库打包后的dist文件：执行node -e "console.log(require('./dist/index.js'))"，确认导出结构符合预期。

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