The requested module does not provide an export named 'default'

[JesusTheHun]

Switching from the regular builder, I removed storybook from my project and re-installed it using

npx sb@next init --builder storybook-builder-vite

.storybook/main.js

module.exports = { core: { builder: "storybook-builder-vite" }, async viteFinal(config, { configType }) { // customize the Vite config here config.resolve.alias = { ...config.resolve.alias, ...absolutePathAliases };

// return the customized config
return config;

},
stories: [
"../src//*.stories.mdx",
"../src//*.stories.@(js|jsx|ts|tsx)"
],
addons: [
"@storybook/addon-actions",
"@storybook/addon-essentials",
"storybook-addon-intl",
{
name: '@storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
},
},
},
],
typescript: {
check: false,
checkOptions: {},
reactDocgen: 'react-docgen-typescript',
},
}

When starting storybook I have no error, but when I open storybook in the browser I get this error :

Uncaught SyntaxError: The requested module '/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js?v=403370d2' does not provide an export named 'default' coming from emotion-theming.browser.esm.js?v=403370d2

I'm not sure if this issue is related to this repo directly but I have to start somewhere :)

[eirslett]

Have you tried adding the problematic dependencies to optimizeDeps?

[JesusTheHun]

Adding @emotion/react to optimizeDeps solves the issue

[akbarkz]

Adding @emotion/react to optimizeDeps didn't help in my case. And this error appears not when I open Storybook, but when I open the webapp itself. Weirdly, after relaunching the webapp using npm for several times, it works. Usually it takes 2-3 relaunces to make it work. But it never works from the first launch.

[IanVS]

Do you see any messages in your terminal about vite finding new dependencies?

[akbarkz]

Yes @IanVS , there is one actually:

[vite] new dependencies found: @emotion/react/jsx-dev-runtime, updating...

What should I do with that?

[IanVS]

@akbarik, that also needs to be added to your optimizeDeps.include. Storybook doesn't like it when Vite finds new deps and updates. Not sure exactly why, but making sure you don't have any of those messages is important for the storybook vite builder to work correctly.

[akbarkz]

Damn, now this error happens when I open Storybook ((
When launching Storybook I received new dependencies messages in the console and so I added all of those to optimizeDeps.include list of viteFinal's entry of the configuration in .storybook/main.js. After that there were no new deps messages in the console any more. But when opening Storybook in the browser's console I receive this error:

SyntaxError: The requested module '/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js?v=236b7c74' does not provide an export named 'default'

This error is referring to node_modules/emotion-theming/dist/emotion-theming.browser.esm.js?v=236b7c74 file.
Oh, and btw, @emotion/react is also in the list of optimizeDeps.include.
Can someone please tell me what can it be?

[IanVS]

@akbarik is it possible for you to share a link to your project? I believe you should be able to add hoist-non-react-statics to your optimizeDeps.include. Also, be sure not to override the existing optimizeDeps.entries and optimizeDeps.include in the initial config that is provided as a param to the viteFinal function.

Why do you say the error refers to emotion-theming.browser.esm.js?v=236b7c74? I don't see that referenced in what you included. But, if that is also causing errors, you should be able to include emotion-theming in the list, right?

[akbarkz]

You're right, the problem was with overwriting the existing optimizeDeps. Thanks!

[stephenhebert]

This thread saved my day today. Thank you!

[AbednegoTM]

Thread helped me thanks everyone

[leah-committed]

Where to add @emotion/react ?

export default defineConfig({
plugins: [react()],
server: {
host: 'localhost',
port: 4852,
},optimizeDeps: {
exclude: ['js-big-decimal']
}
});