Storybook-Vite-Builder: requested module does not provide an export

[MIreland]

I'm attempting to use msw-storybook-addon with storybook-builder-vite, and running into the following error:

Any suggestions on how to resolve this?

I'll aim to get a code sandbox up if I get a chance

[yannbf]

Hey @MIreland thanks for opening this issue! I haven't really used this addon with vite so it would be incredibly helpful if you could provide a repro for it! Let me know and I'll try to figure out what's going on :)

[kettanaito]

@yannbf, this may be related to the issue: mswjs/msw#670

I'm running the reproduction repo above and get the same error:

Uncaught SyntaxError: The requested module './../node_modules/msw-storybook-addon/dist/mswDecorator.js' does not provide an export named 'initialize'

When inspecting the published msw-storybook-addon, I can also see that it doesn't export all the things properly from its main module (there's only mswDecorator variable, everything else must be accessed via 'msw-storybook-addon/dist/mswDecorator', which is not the intention).

[kettanaito]

This looks like a bundler issue at first glance. The module is installed, it does export the things I'm importing in .storybook/preview.js. The things that bundles preview.js throws the exception. It may be connected to virtually anything: wrong module resolution, incompatible targets, internal specifics of tools. We need to find a way to narrow the problematic surface down...

[esquevin]

Vite, just like webpack 5, does not provide node polyfills.
There is some specific code to make it work for webpack 5, it may need to be extended to support other bundlers :/

cf

msw-storybook-addon/packages/msw-addon/src/mswDecorator.ts

Line 32 in 361418e

* Webpack 5 does not provide node polyfills as it did before.

[dannyhw]

This often happens for me the msw addon and vite builder but if I stop and start storybook it works again

[CurtisHumphrey]

If you are using Vite: 4.3.9, and version 1.8 of this plugin for Storybook 7. I was able to get it to work by adding the following code to vite.config.ts

import replace from '@rollup/plugin-replace'

export const config: UserConfigExport = {
  plugins: [
    replace({
      '_globalThis$process.env.NODE_ENV': JSON.stringify('production'),
    }),
    react(),
// the rest

[kettanaito]

@CurtisHumphrey, what you are describing looks like a fix for graphql's issue about incorrectly relying on process.env.NODE_ENV in browser contexts. That has been since resolved in the graphql package (that issue leaks to you due to how MSW depends on GraphQL).

Update

We need to try to reproduce this with the latest version of everything.