rollup.js build 上的 hoist-non-react-statics 问题

Question

我在尝试使用 rollup.js 构建我的故事书时遇到问题，在我使用的反应组件中 @mui/material 在他们的安装页面中要求同时安装名为 @emotion/react 和 @emotion/styled 的软件包，但每当我尝试使用 rollup.js npm run build-lib 构建时，我都会在下面收到以下错误我认为这可能与 @mui/material 或 @emotion/react 有关，不太确定，但我该如何解决这个问题？非常感谢。

错误

> rollup -c

[!] Error: 'default' is not exported by node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js, imported by node_modules/@emotion/react/_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/@emotion/react/_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js (1:7)
1: import hoistNonReactStatics from 'hoist-non-react-statics';
          ^
2:
3: // this file isolates this package that is not tree-shakeable
Error: 'default' is not exported by node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js, imported by node_modules/@emotion/react/_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js

peerDependencies

"peerDependencies": {
    "prop-types": "^15.8.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-router-hash-link": "^2.4.3"
},

依赖关系

"dependencies": {
    "@babel/preset-stage-0": "^7.8.3",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@fontsource/dm-sans": "^4.5.6",
    "@mui/icons-material": "^5.6.2",
    "@mui/material": "^5.6.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^14.1.1",
    "react-scripts": "5.0.1",
    "react-slick": "^0.29.0",
    "rollup-plugin-terser": "^7.0.2",
    "slick-carousel": "^1.8.1",
    "url-loader": "^4.1.1",
    "web-vitals": "^2.1.4"
 },

devDependencies

"devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@rollup/plugin-image": "^2.1.1",
    "@rollup/plugin-node-resolve": "^13.2.1",
    "@storybook/addon-actions": "^6.4.22",
    "@storybook/addon-essentials": "^6.4.22",
    "@storybook/addon-interactions": "^6.4.22",
    "@storybook/addon-links": "^6.4.22",
    "@storybook/builder-webpack5": "^6.4.22",
    "@storybook/manager-webpack5": "^6.4.22",
    "@storybook/react": "^6.4.22",
    "@storybook/testing-library": "0.0.11",
    "@svgr/webpack": "^6.2.1",
    "babel-loader": "^8.2.5",
    "babel-preset-gatsby": "^2.12.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^6.7.1",
    "path": "^0.12.7",
    "prop-types": "^15.8.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "rollup": "^2.70.2",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
 }

脚本

"scripts": {
    "build": "webpack",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "build-lib": "rollup -c"
 },

Answer 1

有同样的错误，我可以通过在 rollup.config.js

中使用 @rollup/plugin-commonjs 来解决这个问题

https://github.com/rollup/plugins/tree/master/packages/commonjs#custom-named-exports

rollup.js build 上的 hoist-non-react-statics 问题

hoist-non-react-statics issue on rollup.js build

rollup

reactjs

material-ui

rollupjs

storybook