Core: Support manager build using Webpack5 #14044
Comments
|
It looks like #14001 is a small change Why not use the webpack version that is available on node_modules? I think we should prefer webpack 5 instead of webpack 4 as it is the future Webpack 4 should be considered a legacy instead of the main option We should move forward |
Because webpack4 => 5 is a major breaking change. The builders include not only the webpack dependency but the right versions of various loaders/plugins.
We will in Storybook 7. That's a breaking change and we're not ready to do a major release right now. |
|
Looks @jonawww has a workaround for people who want to use yarn resolutions here #9216 (comment) |
|
I thought about this
Would it work ?
I can confirm it works for me. Thanks. |
|
@VincentLanglet yes this is the opt-in syntax for webpack5 on the preview (user code) side:
Thanks for verifying! I'm going to update the gist with the new information 💯 |
|
FYI: If you want this fixed, please upvote by adding a 👍 to the issue description. We use this to help prioritize! |
|
I've got this new error while using webpack 5 with all this resolutions and core builder for webpack5 @storybook/core-common/dist/cjs/templates/index.ejs:76
__webpack_require__.p = __webpack_base_uri__ = htmlWebpackPluginPublicPath;
^
ReferenceError: __webpack_base_uri__ is not defined
- index.ejs:76 Object.data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;
[app]/[@storybook]/core-common/dist/cjs/templates/index.ejs:76:46
- index.ejs:99 __webpack_require__
[app]/[@storybook]/core-common/dist/cjs/templates/index.ejs:99:41
- index.ejs:115
[app]/[@storybook]/core-common/dist/cjs/templates/index.ejs:115:11
- index.ejs:117
[app]/[@storybook]/core-common/dist/cjs/templates/index.ejs:117:12
- index.js:144 HtmlWebpackPlugin.evaluateCompilationResult
[app]/[builder-webpack5]/[html-webpack-plugin]/index.js:144:28
- index.js:342
[app]/[builder-webpack5]/[html-webpack-plugin]/index.js:342:26 |
|
@sibelius I've updated the gist with the following recommended workaround: Please give this a try and let me know if it solves your problem! |
|
@shilman, for me it doesn't work with But I think I have another issue. I get tons of the following log and then |
|
webpack 5 uses more memory |
|
For the record, the error I get with webpack-dev-middleware It was removed in the v4
It's working, but I think it's using more and more memory with the time. |
|
Removing this line https://github.com/storybookjs/storybook/blob/next/lib/builder-webpack4/src/index.ts#L65 solve my issue. But then I started wondering if I shouldn't use the This fixed my issue. My bad for only reading the resolution part and not https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade |
|
@VincentLanglet so you don't have memory issues anymore? I'm asking because I use |
|
Hi, @shilman what do you think about adding more visibility to your gist ? Adding it somewhere in the readme ? Pinning this issue ? |
|
Thanks @VincentLanglet. Here are my rough thoughts:
I don't know where I stand on this issue specifically. Philosophically, the manager builder should not be user-configurable. However, practically we might need to in order to fully support webpack5. I'd like to get to a point where the manager doesn't even need to be bundled at runtime. |
|
I can confirm that the following works: package.json .storybook/main.js build environment I'm also using |
|
@shilman I'm a little unclear what the current expected behavior is. Is Storybook supposed to work when the manager is built with webpack 4 but previews are built with webpack 5? When I try to do this in a brand new Angular 12 project, I get errors. See here for full text of errors. See a minimal repro here. Is it expected that this won't work for anyone if we don't use yarn with the workarounds mentioned in the gist? Please let me know if this should be a new issue. Note that Angular 12 uses only Webpack 5 and is planned to come out tomorrow, May 12. |
|
@literalpie Yes, the manager & preview are running in separate processes so the manager running webpack4 and preview running webpack5 is the expected usage. I've updated the gist to clarify that using yarn resolutions is not the recommended approach. That section only exists for people that were trying to run yarn resolutions on the Thanks for the heads up on Angular 12! 🙏 |
|
Any update about when it's going to support this? We are stuck on using Storybook because of this? |
|
Trying to get this out for 6.3 beta next week. |
|
Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.37 containing PR #15001 that references this issue. Upgrade today to the Closing this issue. Please re-open if you think there's still more to do. |
|
¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.38 containing PR #15001 that references this issue. Upgrade today to the |
|
ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.39 containing PR #15001 that references this issue. Upgrade today to the |
|
Latest alpha still has |
|
@ntucker Yes otherwise it would be a breaking change and this is a minor release |
|
@shilman I've tried updating to the latest alpha but getting an error Full error: |
|
@jribeiro Make sure all your packages are on alpha.41 |
|
Thanks @shilman. That did the trick |
|
Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.42 containing PR #15019 that references this issue. Upgrade today to the |
|
Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.44 containing PR #15016 that references this issue. Upgrade today to the |
|
Hey, I ran the upgrade steps but still running into the issue with have multiple versions of webpack. .storybook/main.js And I get this: I tried setting the resolutions above, removing node_modules, etc, but no luck. @shilman I saw your comment about about it being a breaking change for core-server, but is there any temp fix for this? I'd love to start using storybook in my project. |
|
@kauffmanes do you have a reproduction repo? |
I made a repo to try to reproduce it and it worked in there so I just compared values and found my mistake. I had |
|
Hi, it's been several days since i stuck with the issue, i tried all the solution but no luck. will be please help me out. issue is : start-storybook works but build-storybook failsstart-storybook works smooth with add-ons as well. but build-storybook fails, if i add any of the addons in .storybook.main.ts error is:
and also if i remove addons then also its fails and throw an error:
my configurations are: its a web component package library by open-wc generator. then i upgraded that to latest storybook for sass support. everything is working except build-storybook project dependencies and dev-dependencies are:
and main.js is: `const path = require('path'); module.exports = { and my-preset is: `const path = require('path'); module.exports = { }, |
|
@shilman EDIT: |
|
@AlonMiz Storybook doesn't use WB4 when you use the webpack 5 builder and configure it correctly. We use it in our NX Monorepo without any yarn package resolutions anymore. |
|
@smasala |
|
@AlonMiz ah ok, yes internally perhaps and I'm not sure about // main.js
core: {
builder: 'webpack5',
}, "@storybook/angular": "~6.3.0",
"@storybook/builder-webpack5": "~6.3.0",
"@storybook/manager-webpack5": "~6.3.0", |
|
i was able to make webpack 5 work with these ingredients: storybook configI think what made the docgen work was this line resolutionsgod bless our souls. that was pretty damn hard to make all those clunky stuff work together. i hope those annoying mismatches will be solved soon |
|
Hmmmm, it would be nice if I could use webpack 5 for the manager, and the vite builder for the preview. Are there plans to default the manager to webpack 5 in storybook 7.0? Edit: looks like that's the plan: #13491 |
With #13808, Storybook supports building the "preview" (user code) in either webpack4 (default) or webpack5 (opt-in).
However, it only builds the manager UI in webpack4 #14001. This means that there are two versions of webpack installed which increases the
node_modulessize can also cause version conflicts.If Storybook also supports building the manager using webpack5, users can use yarn resolutions to force a single version of Webpack and mitigate these issues.
Proposal:
core: { builder: 'webpack5' }switches both the preview/manager instead of just previewThe text was updated successfully, but these errors were encountered: