Webpack 5 Throws ModuleNotFoundError #47
Comments
|
Right now what I do to get this to not throw is remove the addon's decorator and initialize code from If I add the addon's initialize code before starting the server, it throws. |
|
Went through the same thing just now... 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 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 ! |
|
Thanks @mouhannad-sh, this worked perfectly for me. I suppose mswjs depends on some Node modules even when using it in the browser which explains why Webpack's fallback defaults were needed previously. |
|
Is there any stack trace to these errors? MSW mustn't use any Node.js modules in a browser. We have two separate builds for the browser and Node.js. As long as you don't import Can somebody confirm that a clean Storybook setup with webpack 5 behaves properly without the polyfills but adding this add-on results in errors? |
|
I just upgraded my project from gatsby 2 to 3, which switches to webpack 5. I followed all the instructions in the storybook webpack 5 documentation (with Shilman's help), but this error kept happening. I noticed the After that, Storybook launched without issue. I googled and found this thread on github. I followed @mouhannad-sh instructions, uncommented the msw storybook code and everything works again. Here is the stack trace (it repeats this error multiple times, so I only pasted the first occurrance). |
|
Based on the stack trace, the issue is caused by the client-side Storybook loading a Node.js version of MSW ( @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 🤔 Edit: I managed to reproduce it. Will investigate further! |
|
Hi @yannbf by any chance do you have a minimal repro? I'm experiencing the same issue in a different non-storybook repo but I haven't been able to isolate the issue. For some reason the server code is getting bundled even if my require is behind a conditional 🤔 |
|
Hey @donferi the thing is that Webpack can't really tell whether a node code will run at runtime or not, so even if you are 100% sure the node code will not run on the browser, Webpack will still try to process it. In Webpack 4 the node polyfills were added, but they are removed in Webpack 5 so we either need to add them manually, or make sure that Webpack will ignore the require/imports. There's a long discussion about that here if you'd like to get more context about it! |
|
The issue should be fixed by #53. |
still get the same issue |
|
Please update to msw@latest. |
|
my problem was with using the wrong |
|
I'm having a similar issue (mode not found errors when running app on the browser) but without storybook. I'm importing a type from Here is an example of the errors I'm seeing on the react-error-overlay: Here's the code that I think may be responsible for these errors: // mockNetwork.ts
import { handlers } from './handlers';
import type { SetupWorkerApi } from 'msw';
import type { SetupServerApi } from 'msw/node';
type TNetworkType = 'worker' | 'server';
interface IMockNetwork {
type: TNetworkType;
worker?: SetupWorkerApi;
server?: SetupServerApi;
}
export function __generateMockNetwork(): IMockNetwork {
return process.env.NODE_ENV === 'development' ?
__setupWorker()
:
__setupServer();
}
function __setupWorker(): IMockNetwork {
const { setupWorker } = require('msw');
return {
type: 'worker',
worker: setupWorker(...handlers)
};
}
function __setupServer(): IMockNetwork {
const { setupServer } = require('msw/node');
return {
type: 'server',
server: setupServer(...handlers)
};
}
export const mockNetwork = __generateMockNetwork();
|
|
Hi, @ninjarogue. I believe I've replied to you in another thread. You have the mistake of missing |
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:
This error is thrown multiple times for multiple packages. Has this been reported before? Any possible fix?
The text was updated successfully, but these errors were encountered: