msw-storybook-addon: Webpack 5 Throws ModuleNotFoundError

Hi, I’m using Webpack^5.46.0, @storybook/react^6.3.4, msw-storybook-addon^1.2.0, and msw^0.35.0. I have Storybook configured to use Webpack 5. Whenever the Storybook dev server is running and I modify the preview to initialize the worker, it works. But when I shutdown the server and restart it, it breaks with the following error:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it

This error is thrown multiple times for multiple packages. Has this been reported before? Any possible fix?

About this issue

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

Most upvoted comments

Went through the same thing just now… following the error traces. I tried this and it worked for me (looking for a better solution 😄 )

I followed the setup guide from storybook to support webpack 5

my deps look like this now:

"devDependencies": {
    "@storybook/addon-actions": "^6.4.0-alpha.11",
    "@storybook/addon-essentials": "^6.4.0-alpha.11",
    "@storybook/addon-links": "^6.4.0-alpha.11",
    "@storybook/builder-webpack5": "^6.4.0-alpha.11",
    "@storybook/manager-webpack5": "^6.4.0-alpha.11",
    "@storybook/react": "^6.4.0-alpha.11",
    "msw": "^0.35.0",
    "msw-storybook-addon": "^1.2.0"
},
"resolutions": {
    "webpack": "^5.45.1",
    "css-loader": "^5.0.0",
    "dotenv-webpack": "^6.0.0",
    "html-webpack-plugin": "^5.3.2",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.4",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-virtual-modules": "^0.4.2",
  }

Then in .storybook/main.js I have a custom webpackFinal setup to modify SB’s pollyfil configs

webpackFinal: config => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        modules: [path.resolve("./src"), ...config.resolve.modules],
        fallback: {
           timers: false,
           tty: false,
           os: false,
           http: false,
           https: false,
           zlib: false,
           util: false,
           ...config.resolve.fallback,
        }
      }
    };
  }

Nowadays setting up Storybook feels like performing surgery !

+17

mouhannad-sh on Aug 24, 2021

Hi, @ninjarogue. I believe I’ve replied to you in another thread. You have the mistake of missing setupWorker and setupServer in the same module. Those functions are meant for different environments and you cannot import them in a single module. Please split them by modules as shown in the examples and the issue will be gone.

kettanaito on Mar 8, 2022

Based on the stack trace, the issue is caused by the client-side Storybook loading a Node.js version of MSW (setupServer). That latter rightfully relies on Node.js built-ins like http because it’s designed to run in that environment.

@yannbf, do you think this may be an issue we’ve introduced with the worker/server dual support recently?

That seems like it! However I don’t understand why it would happen if that code is supposed to be lazy loaded 🤔 I’d love to check about this issue, though I’m not sure how to reproduce it. Can anyone provide a minimal repro?

Edit: I managed to reproduce it. Will investigate further!

yannbf on Sep 17, 2021