Webpack 5 upgrade #9216
Comments
|
@EdenTurgeman is there an ETA? We're planning for 6.0 right now and it would be convenient if we could make this line up. cc @ndelangen |
|
It looks like everything is quite smooth now, in my case we use lots of webpack plugins, all of them are updated to support webpack 5 at this moment. |
|
@kirill-konshin thanks so much for the update. can you share a list of plugins you're using successfully? ultimately we'll want to make a coordinated move with the rest of the ecosystem (CRA, gatsby, next, etc), but it's good to know where things stand on the plugin front, which is a more fundamental prerequisite for the move. |
|
@shilman makes sense. Here's our list: {
"autoprefixer": "9.7.6",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"circular-dependency-plugin": "5.2.0",
"clean-webpack-plugin": "3.0.0",
"css-loader": "3.5.2",
"cssnano": "4.1.10",
"cssnano-preset-advanced": "4.0.7",
"duplicate-package-checker-webpack-plugin": "3.0.0",
"fast-async": "6.3.8",
"fast-sass-loader": "1.5.0",
"file-loader": "6.0.0",
"fork-ts-checker-webpack-plugin": "4.1.3",
"html-webpack-plugin": "4.2.0",
"mini-css-extract-plugin": "0.9.0",
"postcss-flexbugs-fixes": "4.2.0",
"postcss-loader": "3.0.0",
"speed-measure-webpack-plugin": "1.3.3",
"stats-webpack-plugin": "0.7.0",
"style-loader": "1.1.4",
"ts-loader": "7.0.0",
"url-loader": "4.1.0",
"webpack": "5.0.0-beta.13",
"webpack-bundle-analyzer": "3.7.0",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.10.3",
"webpack-manifest-plugin": "3.0.0-rc.0",
"webpack-merge": "4.2.2"
} |
|
@kirill-konshin @shilman Is there a specific way you set it up to work with the 6.0.0.alpha? Seems like when I start a fresh storybook html-webpack-plugin refuses to start up. |
|
@EdenTurgeman it does not work with Storybook, that's the whole point ))) I have Webpack 5 based setup and I have to stick to Webpack 4 in Storybook... @shilman it would be great if someone could publish a beta version of storybook with at least initial support of Webpack 5. In this case I can provide some testing. |
|
@kirill-konshin Given the state of things this will most likely wind up as a 7.0 breaking change. We'll post here once there's a testable alpha, but don't hold your breath. |
|
@shilman makes sense. Anyway, if you can publish something like an early beta of it, I'll do my best to help. |
|
Thanks @kirill-konshin!! Much appreciated 🙏🙏🙏 |
|
I will take it. Let's see how difficult it will be :) |
|
@7rulnik awesome!!! i think @ndelangen has also started looking at this |
|
I did a pair programming session last week with @ScriptedAlchemy We did a bunch of the work to upgrade to webpack 5, but we didn't quite finish. |
|
Could you open WIP pr so we can track progress? |
|
Certainly: |
|
With webpack 5 being officially released soon, is this worth picking up and getting over the finish line so we can also get support for node 14 that will be reaching LTS soon as well? |
|
@daveisfera yes it is, but we just released v6. A webpack is likely going to be a major breaking change so it'd require us to do a major version bump too. If you'd be able to offer your help, that'd be very very welcome! |
Oops, forgot you need to build that first. Yarn build from root before you change directory |
|
@shilman ive got a bad error JetBrains/svg-sprite-loader#435 since storybook/react uses wp4 and my loader wants wp5 (as it’s installed from my dependencies) I’ve got a resolution conflict... I really find it a bad idea to keep using wp4 and wp5 simultaneously... |
|
Hi @shamin I get the following error when I run Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead) |
|
@pc-vmora Do you have a repro repo you can share? |
|
@shilman it's a private repo. |
|
I saw that v6.2.0-rc.0 was released today. Unfortunately not only I'm still hit with @jantimon wrote earlier that |
|
@targumon What is version of |
|
I'm not using |
|
I was looking into this and I found out why |
|
In continuation to my comment from a few weeks ago - I ran Is this the expected output? does the |
|
@targumon for Now I'm having this same I made a change to - new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
+ new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = global.__webpack_base_uri__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler); |
|
@ja0n run |
|
I'm also getting a similar error. |
|
Update html-webpack-plugin, you still use old version |
|
@alexander-akait see my comment from Apr 5. |
|
@targumon somebody should update this plugin... |
|
@targumon @alexander-akait we are on the latest version AFAIK, so if it's running an older version it could either be due to (1) a misconfiguration in your project, (2) an outdated version in your lockfile, or (3) a hoisting issue: I revamped webpack5 support in 6.3, so if you haven't upgraded that might help: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5-manager-build |
|
This is what I have right now (thanks, Renovate!)
I'm going to delete my lock file and update this post if it fixes the issue. After deleting the lock file...
|
|
it does not make sense to force users installing both webpack v4 & webpack v5 - maybe this can be reopened? |
|
Agreed 👆 |
|
I keep getting the |
|
@aladdin-add @ScriptedAlchemy the plan is to have the user explicitly install a builder (webpack4 or webpack5 or something else like vite) and use that, so that there is only one builder installed. unfortunately this is a breaking change, so we can't do it until 7.0, and in the meantime we are in this ugly (but workable, IMO) situation. |
|
In some rare cases it could cause issues - especially when using npm/yarn (as they will flatten the deps). an example: info Reasons this module exists
- "@storybook#addon-docs#@storybook#builder-webpack4" depends on it
- Hoisted from "@storybook#addon-docs#@storybook#builder-webpack4#css-loader#postcss"
- Hoisted from "@storybook#addon-docs#@storybook#builder-webpack4#css-loader#postcss-modules-local-by-default#postcss"
- Hoisted from "@storybook#addon-docs#@storybook#builder-webpack4#css-loader#postcss-modules-extract-imports#postcss"
- Hoisted from "@storybook#addon-docs#@storybook#builder-webpack4#css-loader#postcss-modules-scope#postcss"
- Hoisted from "@storybook#addon-docs#@storybook#builder-webpack4#css-loader#postcss-modules-values#postcss"it brings postcss v7, not compat with a few plugins - which breaks our building tool. a workaround is to add postcss v8 in the devDependencies. ╭(╯^╰)╮ |
|
@aladdin-add I'd say that these cases are unfortunately not that rare. 😭 But that's the reality of the npm ecosystem at this point in time. |
and others
With webpack 5 reaching it's final stages, I would love to put this on the roadmap since there is much to be gained with the new upgrade.
The text was updated successfully, but these errors were encountered: