CODEWITHSUNDEEP
reactjsmaterial-uistorybookrolluprollupjs
Abdullah Isa
Abdullah Isa

Reputation: 59

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

i am having issues while trying to build my storybook with rollup.js, in my react components i am using @mui/material and in their installation page its asked to also install both packages called @emotion/react and @emotion/styled but whenever i try building with rollup.js npm run build-lib i get the following error below which i think might be related to @mui/material or @emotion/react not very sure but how can i resolve this? thanks very much.

error

> 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$1 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

"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

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

Upvotes: 6

Views: 2147

Answers (1)

Timothy Vogelsang
Timothy Vogelsang

Reputation: 46

Was having the same error, I was able to resolve this by using the @rollup/plugin-commonjs in my rollup.config.js

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

Upvotes: 1

Related Questions