still seeing ModuleNotFoundError

[CollinMonahanLab49]

I saw recent issue Webpack 5 Throws ModuleNotFoundError and related PR fix: add webpack5 support

I was led to this issue because following install and setup of msw-storybook-addon I see a similar error on storybook startup, ModuleNotFoundError: Module not found: Error: Can't resolve 'http' with the same long sequence of

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.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }

However I have msw-storybook-addon version 1.4.1, according to the PR that should be released. Perhaps the issue here is subtly different?

% grep msw-storybook-addon package.json
    "msw-storybook-addon": "^1.4.1",

and from yarn.lock,

msw-storybook-addon@^1.4.1:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/msw-storybook-addon/-/msw-storybook-addon-1.4.1.tgz#7a12cf0116a7af7f1ce1b652838ded161296e963"

[CollinMonahanLab49]

Just as another verification that this project is up to date, in node_modules/msw-storybook-addon/dist/mswDecorator.js I see,

  } else {
    /**
     * Webpack 5 does not provide node polyfills as it did before.
     * Also, it can't tell whether a code will be executed at runtime, so it has to process everything. This branch of the conditional statement will NEVER run in the browser, but Webpack can't know so it breaks builds unless we start providing node polyfills.
     * 
     * As a workaround, we use __non_webpack_require__ to tell Webpack to ignore this, and we define it to globalThis so it works correctly when running in node.
     * See https://github.com/webpack/webpack/issues/8826#issuecomment-660594260
     */
    globalThis.__non_webpack_require__ = require;

The project is created with NextJS create-next-app and it has the next-pwa plugin that installs a different service worker in the production build. Perhaps one of these aspects might make a difference.

[CollinMonahanLab49]

Adding fallbacks to webpackFinal as in the original issue seems like a workaround.

[Wezea]

Unfortunately, I ran into that issue as well using CRA:

devDependencies:

"@storybook/addon-actions": "6.4.19",
"@storybook/addon-essentials": "6.4.19",
"@storybook/addon-links": "6.4.19",
"@storybook/builder-webpack5": "^6.4.19",
"@storybook/manager-webpack5": "^6.4.19",
"@storybook/node-logger": "6.4.19",
"@storybook/preset-create-react-app": "4.0.1",
"@storybook/react": "6.4.19",
"msw": "0.38.1",
"msw-storybook-addon": "1.6.0",

When I am running build-storybook I get this:

info @storybook/react v6.4.19
info 
info => Cleaning outputDir: C:\*****\WebApp\ClientApp\storybook-static
info => Loading presets
info => Loading custom manager config
info => Compiling manager..
info => Compiling preview..
info => Loading Webpack configuration from `node_modules\react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack5 setup     
10% building 0/1 entries 0/0 dependencies 0/0 modulesinfo => Loading custom manager config
ERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve 'tty' in 'C:\***\WebApp\ClientApp\node_modules\msw\node\lib'
ERR! 
ERR! BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
ERR! This is no longer the case. Verify if you need this module and configure a polyfill for it.
ERR! 
ERR! If you want to include a polyfill, you need to:
ERR!    - add a fallback 'resolve.fallback: { "tty": require.resolve("tty-browserify") }'
ERR!    - install 'tty-browserify'
ERR! If you don't want to include a polyfill, you can use an empty module like this:
ERR!    resolve.fallback: { "tty": false }
64% building 15/15 entries 16190/16211 dependencies 3792/5241 modulesERR! ModuleNotFoundError: Module not found: Error: Can't resolve 'tty' in 'C:\***\ClientApp\node_modules\msw\node\lib'
ERR! 
ERR! BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
ERR! This is no longer the case. Verify if you need this module and configure a polyfill for it.
ERR! 
ERR! If you want to include a polyfill, you need to:
ERR!    - add a fallback 'resolve.fallback: { "tty": require.resolve("tty-browserify") }'

ERR!    - install 'tty-browserify'
ERR! If you don't want to include a polyfill, you can use an empty module like this:
ERR!    resolve.fallback: { "tty": false }
ERR!     at C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\Compilation.js:2014:28
ERR!     at C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModuleFactory.js:791:13
ERR!     at eval (eval at create (C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:10:1)
ERR!     at C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModuleFactory.js:265:22
ERR!     at eval (eval at create (C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
ERR!     at C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModuleFactory.js:427:22
ERR!     at C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModuleFactory.js:111:11
ERR!     at C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModuleFactory.js:663:25
ERR!     at C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModuleFactory.js:848:8
ERR!     at C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModuleFactory.js:968:5
ERR!     at C:\**\ClientApp\node_modules\neo-async\async.js:6883:13
ERR!     at C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModuleFactory.js:951:45
ERR!     at finishWithoutResolve (C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\enhanced-resolve\lib\Resolver.js:307:11)
ERR!     at C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\enhanced-resolve\lib\Resolver.js:381:15
ERR!     at C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\enhanced-resolve\lib\Resolver.js:430:5
ERR!     at eval (eval at create (C:\**\ClientApp\node_modules\@storybook\builder-webpack5\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR! resolve 'tty' in 'C:\**\ClientApp\node_modules\msw\node\lib'

ERR! resolve 'tty' in 'C:\*\ClientApp\node_modules\msw\node\lib'
ERR!   Parsed request is a module
ERR!   using description file: C:\*\ClientApp\node_modules\msw\node\package.json (relative path: ./lib)
ERR!     Field 'browser' doesn't contain a valid alias configuration
ERR!     resolve as module
ERR!       C:\*\ClientApp\node_modules\msw\node\lib\node_modules doesn't exist or is not a directory
ERR!       C:\*\ClientApp\node_modules\msw\node\node_modules doesn't exist or is not a directory
ERR!       looking for modules in C:\*\ClientApp\node_modules\msw\node_modules
ERR!         single file module
ERR!           using description file: C:\*\ClientApp\node_modules\msw\package.json (relative path: ./node_modules/tty)
ERR!             no extension
ERR!               Field 'browser' doesn't contain a valid alias configuration     
ERR!               C:\*****\ClientApp\node_modules\msw\node_modules\tty doesn't exist
ERR!             .web.mjs
ERR!               Field 'browser' doesn't contain a valid alias configuration     
ERR!               C:\*\ClientApp\node_modules\msw\node_modules\tty.web.mjs doesn't exist
ERR!             .mjs
ERR!               Field 'browser' doesn't contain a valid alias configuration     
ERR!               C:\*\ClientApp\node_modules\msw\node_modules\tty.mjs doesn't exist
ERR!             .web.js
ERR!               Field 'browser' doesn't contain a valid alias configuration     
ERR!               C:\*\ClientApp\node_modules\msw\node_modules\tty.web.js doesn't exist
ERR!             .js
ERR!               Field 'browser' doesn't contain a valid alias configuration     
ERR!               C:\*\ClientApp\node_modules\msw\node_modules\tty.js doesn't exist
ERR!             .web.ts
ERR!               Field 'browser' doesn't contain a valid alias configuration     
ERR!               C:\*\ClientApp\node_modules\msw\node_modules\tty.web.ts doesn't exist
ERR!             .ts
ERR!               Field 'browser' doesn't contain a valid alias configuration     
ERR!               C:\*\ClientApp\node_modules\msw\node_modules\tty.ts doesn't exist
ERR!             .web.tsx
ERR!               Field 'browser' doesn't contain a valid alias configuration     
ERR!               C:\*\ClientApp\node_modules\msw\node_modules\tty.web.tsx doesn't exist
ERR!             .tsx
ERR!               Field 'browser' doesn't contain a valid alias configuration     
ERR!               C:\*\ClientApp\node_modules\msw\node_modules\tty.tsx doesn't exist
ERR!             .json
ERR!               Field 'browser' doesn't contain a valid alias configuration     
ERR!               C:\*\ClientApp\node_modules\msw\node_modules\tty.json doesn't exist
ERR!             .web.jsx
ERR!               Field 'browser' doesn't contain a valid alias configuration     
ERR!               C:\*\ClientApp\node_modules\msw\node_modules\tty.web.jsx doesn't exist
ERR!             .jsx
ERR!               Field 'browser' doesn't contain a valid alias configuration     
ERR!               C:\*\ClientApp\node_modules\msw\node_modules\tty.jsx doesn't exist
ERR!         C:\*\ClientApp\node_modules\msw\node_modules\tty doesn't exist

Any idea what could be wrong with my setup?

Thank you very much! It's an awesome tool!

[kettanaito]

Can someone please submit a reproduction repository for this?

There has been a number of changes to msw in the past months involving export conditions. There's a chance those changes might have fixed this issue. Please update msw and let me know if the issue still persists.

Root cause

The error is thrown because a browser module resolution tries to resolve the msw/node export, which is a no-op. This can be both on the package and on webpack (and sometimes even on the user if you're importing msw/node in the wrong place but that's handled by the add-on in our situation).