builder-vite: Incompatibility when using with existing components (Error: 'default' is not exported by...)

I tried running our component library (using Storybook) with this, and got quite far! start-storybook is working perfectly fine, but when trying build-storybook I’m not getting a successful build.

This is probably related to our setup / our components (a private Github repo, unfortunately), as the example (as per README) is working completely fine for me.

The error in question is the following:

info @storybook/react v6.3.0-alpha.14
info
info => Cleaning outputDir: /home/julrich/Projects/Frontend/code/project/dist
info => Copying static files: ./legacy-instance => ./
info => Loading presets
info => Compiling manager..
vite v2.2.1 building for production...
transforming (1312) ../../@storybook/addon-essentials/node_modules/@storybook/components/dist/esm/controls/react-editable-json-tree/components/JsonArray.jsConflicting namespaces: node_modules/@storybook/client-api/dist/esm/index.js re-exports 'combineParameters' from both node_modules/@storybook/client-api/dist/esm/index.js and node_modules/@storybook/client-api/dist/esm/parameters.js (will be ignored)
transforming (1941) ../../lodash/_baseFindIndex.jsConflicting namespaces: node_modules/@storybook/addon-essentials/node_modules/@storybook/components/dist/esm/index.js re-exports 'components' from both node_modules/@storybook/addon-essentials/node_modules/@storybook/components/dist/esm/index.js and node_modules/@storybook/addon-essentials/node_modules/@storybook/components/dist/esm/typography/DocumentFormatting.js (will be ignored)
transforming (1987) ../../../packages/components/blog/lib/news-list/news-list.cssUse of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Error when using sourcemap for reporting an error: Can't resolve original location of error.
✓ 1989 modules transformed.
'default' is not exported by /home/julrich/Projects/Frontend/code/project/node_modules/core-js-pure/features/object/get-own-property-symbols.js?commonjs-proxy, imported by node_modules/@babel/runtime-corejs3/core-js/object/get-own-property-symbols.js
file: /home/julrich/Projects/Frontend/code/project/node_modules/@babel/runtime-corejs3/core-js/object/get-own-property-symbols.js:2:7
1: import 'core-js-pure/features/object/get-own-property-symbols?commonjs-require';
2: import require$$0 from 'core-js-pure/features/object/get-own-property-symbols?commonjs-proxy';
          ^
3:
4: var getOwnPropertySymbols = require$$0;
ERR! Error: 'default' is not exported by /home/julrich/Projects/Frontend/code/project/node_modules/core-js-pure/features/object/get-own-property-symbols.js?commonjs-proxy, imported by node_modules/@babel/runtime-corejs3/core-js/object/get-own-property-symbols.js
ERR!     at error (/home/julrich/Projects/Frontend/code/project/node_modules/rollup/dist/shared/rollup.js:5305:30)
ERR!     at Module.error (/home/julrich/Projects/Frontend/code/project/node_modules/rollup/dist/shared/rollup.js:9750:16)
ERR!     at Module.traceVariable (/home/julrich/Projects/Frontend/code/project/node_modules/rollup/dist/shared/rollup.js:10138:29)
ERR!     at ModuleScope.findVariable (/home/julrich/Projects/Frontend/code/project/node_modules/rollup/dist/shared/rollup.js:8899:39)
ERR!     at Identifier.bind (/home/julrich/Projects/Frontend/code/project/node_modules/rollup/dist/shared/rollup.js:4035:40)

Not sure what might cause this. Already tried debugging it with VSCode, and looking at the generated source. If these are features we’re utilizing in our components, I’d be happy to get rid of them / replace them. Just no real idea on where to start hunting!

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 16 (5 by maintainers)

Most upvoted comments

My dependencies:

"@babel/core": "^7.17.9",
"@material-ui/core": "^4.12.4",
"@material-ui/lab": "^4.0.0-alpha.
"@material-ui/styles": "^4.11.5",
"@rjsf/core": "^4.1.1",
"@storybook/addon-actions": "^6.4.
"@storybook/addon-essentials": "^6
"@storybook/addon-interactions": "
"@storybook/addon-links": "^6.4.22
"@storybook/builder-vite": "^0.1.2
"@storybook/react": "^6.4.22",
"@storybook/testing-library": "^0.
"@types/react": "^17.0.33",
"@types/react-dom": "^17.0.10",
"@vitejs/plugin-react": "^1.0.7",
"@vitejs/plugin-react-refresh": "^
"babel-loader": "^8.2.4",
"js-yaml": "3.13.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"typescript": "^4.5.4",
"vite": "^2.9.5",
"vite-plugin-dts": "^1.0.5",
"vite-plugin-eslint": "^1.3.0"

Storybook doesn’t use my vite config so no need to share it, right?

Sure, good to hear that you figured it out!

Core-js is a pain, since it doesn’t support ESM modules. You have to either add the core-js files to optimizeDeps - one by one - or do something like https://github.com/eirslett/storybook-builder-vite/blob/main/packages/storybook-builder-vite/mock-core-js.js and mock core-js (or core-js-pure) entirely. Does that work?