Webpack 5 upgrade
Closed this issue · 158 comments
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.
@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.
/****Project name *****/node_modules/@storybook/core/node_modules/html-webpack-plugin/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:29
normalModuleFactory.hooks.factorize.tapAsync(
^
TypeError: Cannot read property 'tapAsync' of undefined
@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.
Here's our WIP branch: origin/tech/webpack5
Could you open WIP pr so we can track progress?
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.
And this PR is pretty far of from being ready.
If you'd be able to offer your help, that'd be very very welcome!
FYI I've faced an issue that webpack-virtual-modules, which is used in Storybook, was not compatible with Webpack 5, I pinged the author, the issue sysgears/webpack-virtual-modules#43 is now resolved. One step closer to the goal.
@ndelangen I've never worked with the storybook code directly, but I'd be glad to help out. Is there anything in particular that I could/should take a look at?
I strongly recommend do not use fast-sass-loader, there are lot of problems between sass and webpack resolving, they are fixed in sass-loader only
that's awesome @kirill-konshin thanks for the help!
@daveisfera right now, we don't know exactly what breaks and what works when we'd update to webpack 5.
A list of things that need to be fixed would help.
- upgrade the repo to the latest version of webpack and related dependencies and see what breaks
It seems @kirill-konshin might have a good grasp on needed changes?
Virtual modules isn't the most optimal solution. But I've used this with early versions of webpack 5
Webpack 5 is released https://webpack.js.org/blog/2020-10-10-webpack-5-release/
Storybook's package.json only allows v4, which means upgrading to v5 for non-Storybook builds results in two versions of webpack in node_modules which seems to break Storybook. Using resolutions with yarn to force it to v5 seems to break it too though. Basically can't upgrade to v5 rn until Storybook supports it :/
Yeah this is a tricky one. You need to put it in a monorepo and no-hoist webpack. That's resolved it previously
We're currently building our application with webpack 5 and using webpack 4 for storybook and it's working. We use yarn workspaces, if that matters
Add nohoist to your workspace config. That should prevent webpack getting mixed up. Might need to prevent neo-async as well but see what error comes after adding nohoist:[webpack/**]
Adding nohoist didn't do the trick for me. Tried a bunch of different combinations (see below). Also removed node_modules and yarn.lock. I am still getting the same error:
Webpack 4 is still in my bundle. Nohoist seems to be working correctly. here is the output of yarn why webpack:
$ yarn why webpack
yarn why v1.19.1
[1/4] Why do we have the module "webpack"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "webpack@5.1.0"
info Has been hoisted to "webpack"
info Reasons this module exists
- "workspace-aggregator-4b2e8060-0902-4e8c-9d1d-0130a7d80095" depends on it
- Specified in "devDependencies"
- Hoisted from "_project_#webpack"
info Disk size without dependencies: "25.65MB"
info Disk size with unique dependencies: "25.65MB"
info Disk size with transitive dependencies: "25.65MB"
info Number of shared dependencies: 107
=> Found "@storybook/react#webpack@4.44.2"
info Reasons this module exists
- "_project_#@storybook#react" depends on it
- in the nohoist list ["/_project_/webpack","/_project_/**/webpack/**","/_project_/**/webpack","/_project_/*webpack*","/_project_/*webpack*/**"]
info Disk size without dependencies: "2.33MB"
info Disk size with unique dependencies: "2.33MB"
info Disk size with transitive dependencies: "2.33MB"
info Number of shared dependencies: 162
=> Found "@storybook/core#webpack@4.44.2"
info Reasons this module exists
- "_project_#@storybook#react#@storybook#core" depends on it
- in the nohoist list ["/_project_/webpack","/_project_/**/webpack/**","/_project_/**/webpack","/_project_/*webpack*","/_project_/*webpack*/**"]
info Disk size without dependencies: "2.81MB"
info Disk size with unique dependencies: "2.81MB"
info Disk size with transitive dependencies: "2.81MB"
info Number of shared dependencies: 162
Done in 1.09s.
Relevant part of my package.json file:
"workspaces": {
"packages": [
"packages/*"
],
"nohoist": [
"webpack",
"**/webpack/**",
"**/webpack",
"*webpack*",
"*webpack*/**"
]
},
"devDependencies": {
"@storybook/react": "6.0.26",
"webpack": "5.1.0"
}Remove webpack from the root package json. Only install webpack in the child package json otherwise webpack 5 is hoisted to the top.
Remove webpack from the root package json. Only install webpack in the child package json otherwise webpack 5 is hoisted to the top.
Yeah, i was afraid of that, but thanks for the confirmation. That'd mean refactoring the build process to be confined to a separate package though. Im gonna give it a few weeks to see if the storybook guys find a solution 😄
@tobilen don't hold your breath. we'd love to provide an upgrade path but i don't expect it to happen in 6.1 unless a solution arises from the community (which is entirely possible, but subject to chance!)
@shilman Ran into similar issue while using storybook and webpack app from same repo. Only way to solve this is separation of webpack versions from node_modules. Is there a possibility with start-storybook CLI to specify custom path to webpack binary? That might solve it for us.
@shobhitsharma were you able to make it work? I am also trying to have both versions of webpack installed (webpack 4 just for storybook) but I am using npm (not yarn, no workspaces) and so far had no luck.
as anyone had a breakthrough with this? 😅
thanks
Wait so what's the current problem holding storybook back. There's slim chance I won't be able to upgrade it.
I'll pull the branch mentioned above and actually lend a hand. Sorry for taking so long 😕
Wait so what's the current problem holding storybook back. There's slim chance I won't be able to upgrade it.
I'll pull the branch mentioned above and actually lend a hand. Sorry for taking so long
Thanks for jumping in!
Bascially, when starting storybook on webpack 5, we get a white page with the error message shown in my screenshot above (#9216 (comment)). You can probably reproduce it very easily by creating a repo, installing storybook (npx sb init), resolving webpack to 5.x in your package.json and then starting it (i think its yarn storybook:watch).
Thanks so much @ScriptedAlchemy. I believe you and @ndelangen started on this here: #11326
I'm on a phone so it's not jumping me to the right comment.
Is it this?
normalModuleFactory.hooks.factorize.tapAsync()
From html plug-in?
I'm on a phone so it's not jumping me to the right comment.
Is it this?
normalModuleFactory.hooks.factorize.tapAsync()
From html plug-in?
@ScriptedAlchemy Yes, see the stacktrace below:
TypeError: Cannot read property 'tapAsync' of undefined
at ExternalModuleFactoryPlugin.apply (/PROJECT_DIR/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:41:39)
at /PROJECT_DIR/node_modules/webpack/lib/ExternalsPlugin.js:30:63
at SyncHook.eval (eval at create (/PROJECT_DIR/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:1)
at SyncHook.lazyCompileHook (/PROJECT_DIR/node_modules/tapable/lib/Hook.js:154:20)
at /PROJECT_DIR/node_modules/webpack/lib/Compiler.js:665:23
at AsyncSeriesHook.eval [as callAsync] (eval at create (/PROJECT_DIR/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
at AsyncSeriesHook.lazyCompileHook (/PROJECT_DIR/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.compile (/PROJECT_DIR/node_modules/webpack/lib/Compiler.js:662:28)
at Compiler.runAsChild (/PROJECT_DIR/node_modules/webpack/lib/Compiler.js:328:8)
at Object.pitch (/PROJECT_DIR/node_modules/mini-css-extract-plugin/dist/loader.js:126:17)Yeah just bump to @next tag or you can use my fork. Apparently many projects have been using it🤭
The plugin did release v5 support tho.
If I'm using yarn workspaces and have nohoist set html-webpack-plugin has a copy of webpack 5 in it's node_modules:
node_modules/html-webpack-plugin/node_modules/webpack <- webpack 5
node_modules/webpack <- webpack 4
(if I manually delete html-webpack-plugin's webpack folder everything works)
If I copy the package outside of the workspace and run yarn, html-webpack-plugin doesn't have it's own copy of webpack anymore and it works
not sure if nohoist is stopping html-webpack-plugin's webpack from being hoisted and if there's a way to fix this?
PR the plugin it should be setting webpack as a dep
Right now webpack is a peer dependency of the html-webpack-plugin - do we need to adjust the version range?
"peerDependencies": {
"webpack": "^4.0.0 || ^5.0.0"
},
According to this calculator it works correctly:
https://jubianchi.github.io/semver-check/#/^4.0.0%20||%20^5.0.0/5.1.0
There is also this error The 'compilation' argument must be an instance of Compilation which is caused here:
compilation instanceof Compilation returns false if multiple webpack versions are installed (e.g. inside a mono repository) as in that case there would be multiple different Compilation prototypes.
Is there anything I can do to support resolving this issue?
peerDependencies is usually fine. Multiple webpack version installed should be avoided in general.
Since webpack 5 you can also write plugins without any dependency on webpack. The Compiler object exposes a webpack property, which is the version of webpack currently in use.
so is it done? or still working on? I wanna use storybook with webpack 5.
I saw yarn is tricky way to fix but I want stable way to use.
I'll pull the branch tomorrow and see if theres anything left. Will report back any tasks or issues remaining
Okay, working on this now.
Lots of TS issues because old webpack 4 is shown in yarn list, many of them.
Ive resolved to v5 for now, and upgraded webpack to v5 stable.
will see if i can get storybook to build, then can test an example
Related: We released #12707 yesterday which means that the "manager" UI only builds when it changes. This comes with a better UI and also frees up CPU for building the user's "preview" bundle. Should help with webpack on the user's side.
Try it out today in 6.1-alpha:
npx sb@next upgrade --prerelease
stupid question, but itll save me time. Wheres the webpack config that drives storybook. The caching config isn't valid
What sets cache
export default async ({
configDir,
configType,
docsMode,
entries,
refs,
dll,
outputDir,
cache,
previewUrl,
versionCheck,
presets,
}) => {
The cache value is likely the beta config value (it changed slightly)
Sorry I'm on my phone now. I can pair on this in 1h if that's helpful. @ScriptedAlchemy
Okay, i got everything working. Sorting out webpack-virtual-modules
sysgears/webpack-virtual-modules#43
No other build errors occur.
Let me see if wvm update did the trick.....
Couple more issues with loader queries..
Need to add this: (please fix or contact authors to fix their package.json files, this is a bandaid.
{
test: /\.m?js$/,
type: "javascript/auto",
resolve: {
fullySpecified: false
}
},
Okay, its building successfully. However, there are some examples that do not build due to TS plugin. the config props might have changed, but i don't use that plugin so only know the rules it needs / its loader needs.
I also get this error - (node:3600) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/Volumes/lulu_dev/storybook/lib/core/dll/storybook_ui-manifest.json'
which likely is related to some emit plugin, but im not sure where or what this is. looks like a simple fix though. When i tried the react example, it built and scripts loaded, but i think some plugin isn't writing a file to initialize something else. However, this codebase is rather large to navigate in 2 hours
I recommend updating all the webpack plugins and loaders across everything.
You have a few DeprecationWarning: likely originating from out of date dependencies.
I'll tentatively say that this is now in a debuggable, and operable state where webpack compiles without error.
It's late here, so i can't put any more time toward it tonight. But i think we are in the home stretch (haven't run tests, or multiple examples)
I don't know how to really test this, i just made it build - so someone who knows how storybook works, you might recognize the names of any remaining issues. If you hit other hard build errors, tag me.
Snapshot Summary
› 5 snapshots failed from 2 test suites. Inspect your code changes or re-run jest with `-u` to update them.
Test Suites: 5 failed, 121 passed, 126 total
Tests: 9 failed, 1452 passed, 1461 total
Snapshots: 5 failed, 416 passed, 421 total
Time: 75.798 s
Ran all test suites in 7 projects.
Its not 100% perfect, but it builds
@ScriptedAlchemy ypu can use node --trace-deprecation node_modules/.bin/storybook
to get more information about those deprecation warnings:
Almost certain errors are related to a plugin. Thank for this tip! I've always had to decrypt the messages. Best trick I've learned all month😂
Need to add this: (please fix or contact authors to fix their package.json files, this is a bandaid.
{ test: /\.m?js$/, type: "javascript/auto", resolve: { fullySpecified: false } },
This is actually a babel issue that's been fixed ( see webpack/webpack#11467 (comment) )
Not limited to Babel. That just made the most noise on GitHub
Impacts any improperly set project. Babel is most noticeable - I was short on time so I literally just make it build haha.
Can do dep upgrades but Won't be able to resolve framework specific issues if any arise.
Working through upgrading packages now. Need to modify ncu as the lerna update wizard doesn't work on this project.
Getting some TS errors, missing or wrong types. I will not be able to resolve these.
Angular cli examples are broken. Youll need to move to angular cli 11
@ScriptedAlchemy the latest alpha should be capable of picking the correct webpack version if multiple ones are installed
https://www.npmjs.com/package/html-webpack-plugin/v/5.0.0-alpha.9
thanks to @sokra for the hint
Now getting only the following TS errors during build.
uilt: @storybook/addon-knobs@6.0.0-beta.31
lerna ERR! yarn run prepare exited 1 in '@storybook/core'
lerna ERR! yarn run prepare stdout:
$ node ../../scripts/prepare.js
src/client/preview/start.ts(27,25): error TS2345: Argument of type 'import("/Volumes/lulu_dev/storybook/lib/channel-postmessage/node_modules/@storybook/channels/dist/index").Channel' is not assignable to parameter of type 'import("/Volumes/lulu_dev/storybook/lib/channels/dist/index").Channel'.
Types have separate declarations of a private property 'sender'.
src/client/preview/start.ts(57,25): error TS2742: The inferred type of 'start' cannot be named without a reference to '@storybook/channel-postmessage/node_modules/@storybook/channels'. This is likely not portable. A type annotation is necessary.
src/client/preview/start.ts(62,65): error TS2345: Argument of type 'Channel | Channel' is not assignable to parameter of type 'Channel'.
Type 'import("/Volumes/lulu_dev/storybook/lib/channel-postmessage/node_modules/@storybook/channels/dist/index").Channel' is not assignable to type 'import("/Volumes/lulu_dev/storybook/lib/channels/dist/index").Channel'.
src/client/preview/start.ts(64,53): error TS2322: Type 'Channel | Channel' is not assignable to type 'Channel'.
Type 'import("/Volumes/lulu_dev/storybook/lib/channel-postmessage/node_modules/@storybook/channels/dist/index").Channel' is not assignable to type 'import("/Volumes/lulu_dev/storybook/lib/channels/dist/index").Channel'.
src/client/preview/StoryRenderer.test.ts(34,21): error TS2345: Argument of type 'import("/Volumes/lulu_dev/storybook/lib/channel-postmessage/node_modules/@storybook/channels/dist/index").Channel' is not assignable to parameter of type 'import("/Volumes/lulu_dev/storybook/lib/channels/dist/index").Channel'.
src/client/preview/StoryRenderer.test.ts(35,39): error TS2322: Type 'import("/Volumes/lulu_dev/storybook/lib/channel-postmessage/node_modules/@storybook/channels/dist/index").Channel' is not assignable to type 'import("/Volumes/lulu_dev/storybook/lib/channels/dist/index").Channel'.
src/client/preview/StoryRenderer.test.ts(36,48): error TS2322: Type 'import("/Volumes/lulu_dev/storybook/lib/channel-postmessage/node_modules/@storybook/channels/dist/index").Channel' is not assignable to type 'import("/Volumes/lulu_dev/storybook/lib/channels/dist/index").Channel'.
TSFILE: /Volumes/lulu_dev/storybook/lib/core/dist/client/preview/url.d.ts
TSFILE: /Volumes/lulu_dev/storybook/lib/core/dist/client/preview/types.d.ts
TSFILE: /Volumes/lulu_dev/storybook/lib/core/dist/client/preview/loadCsf.d.ts
TSFILE: /Volumes/lulu_dev/storybook/lib/core/dist/client/preview/NoDocs.d.ts
TSFILE: /Volumes/lulu_dev/storybook/lib/core/dist/client/preview/StoryRenderer.d.ts
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run prepare stderr:
ERR! FAILED (ts) :
ERR! FAILED to compile ts: @storybook/core@6.0.0-beta.31
error Command failed with exit code 1.
TS continues to be my least favorite piece of text to encounter 😂
@ScriptedAlchemy that error looks like there are version mismatches between packages of storybook
@ndelangen i know the branch is still on beta releases so i suspected this might mess with something but didn't want to merge. Saw your comment. did you try to merge latest master back into this branch?
My ide is pretty good at auto-merge so i can try that if need be.
Also, side note. Im on an "screw typescript" vibe today - in light of that. How can i simply disable TS altogether and let someone else who cares about TS deal with TS issues?
something like flows strip-types plugin.
I don't really care about anything else other than does the javascript work or not.
Finally!
lerna success run Ran npm script 'prepare' in 59 packages in 171.2s:
lerna success - @storybook/addon-a11y
lerna success - @storybook/addon-actions
lerna success - @storybook/addon-backgrounds
lerna success - @storybook/addon-controls
lerna success - @storybook/addon-cssresources
lerna success - @storybook/addon-design-assets
lerna success - @storybook/addon-docs
lerna success - @storybook/addon-essentials
lerna success - @storybook/addon-events
lerna success - @storybook/addon-google-analytics
lerna success - @storybook/addon-graphql
lerna success - @storybook/addon-jest
lerna success - @storybook/addon-knobs
lerna success - @storybook/addon-links
lerna success - @storybook/addon-queryparams
lerna success - @storybook/addon-storysource
lerna success - @storybook/addon-toolbars
lerna success - @storybook/addon-viewport
lerna success - @storybook/addon-storyshots
lerna success - @storybook/addon-storyshots-puppeteer
lerna success - @storybook/angular
lerna success - @storybook/aurelia
lerna success - @storybook/ember
lerna success - @storybook/html
lerna success - @storybook/marionette
lerna success - @storybook/marko
lerna success - @storybook/mithril
lerna success - @storybook/preact
lerna success - @storybook/rax
lerna success - @storybook/react
lerna success - @storybook/riot
lerna success - @storybook/server
lerna success - @storybook/svelte
lerna success - @storybook/vue
lerna success - @storybook/web-components
lerna success - @storybook/addon-decorator
lerna success - @storybook/addon-parameter
lerna success - @storybook/addon-preview-wrapper
lerna success - @storybook/addon-roundtrip
lerna success - @storybook/addons
lerna success - @storybook/api
lerna success - @storybook/channel-postmessage
lerna success - @storybook/channel-websocket
lerna success - @storybook/channels
lerna success - sb
lerna success - storybook
lerna success - @storybook/cli
lerna success - @storybook/client-api
lerna success - @storybook/client-logger
lerna success - @storybook/codemod
lerna success - @storybook/components
lerna success - @storybook/core-events
lerna success - @storybook/core
lerna success - @storybook/node-logger
lerna success - @storybook/postinstall
lerna success - @storybook/router
lerna success - @storybook/source-loader
lerna success - @storybook/theming
lerna success - @storybook/ui
Okay, All builds are passing, now jest complains.
Looks like global definitions need to be moved out of the init file and into whatever the test entrypoint is (taking a guess)
● Test suite failed to run
Do not import `@jest/globals` outside of the Jest test environment
21 | setItem: jest.fn().mockName('setItem'),
22 | clear: jest.fn().mockName('clear'),
> 23 | };
| ^
24 | global.localStorage = localStorageMock;
25 | global.regeneratorRuntime = regeneratorRuntime;
26 |
at Object.<anonymous> (node_modules/@jest/globals/build/index.js:23:7)
at _getJestObj (scripts/jest.init.js:23:7)
at Object.<anonymous> (scripts/jest.init.js:12:1)
@evilebottnawi im getting WDS stuck in a build loop because i removed watchOptions - i can't remember how i resolved this before inside next.js
How do we ignore in WDS4 - see these file changes for reference
https://github.com/storybookjs/storybook/pull/12964/files#diff-9f45041f8fb2e60087ae36cf773e11052081826d7c8f8906b04fec073990bb41
I'm using npm in one project, I get the following error:
/Users/dan/coding/drupal-ch/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:119
throw new TypeError(
^
TypeError: The 'compilation' argument must be an instance of Compilation
at Function.getCompilationHooks (/Users/dan/coding/drupal-ch/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:119:10)
at /Users/dan/coding/drupal-ch/node_modules/terser-webpack-plugin/dist/index.js:571:67
at SyncHook.eval [as call] (eval at create (/Users/dan/coding/drupal-ch/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:93:1)
at SyncHook.lazyCompileHook (/Users/dan/coding/drupal-ch/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.newCompilation (/Users/dan/coding/drupal-ch/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:631:26)
at /Users/dan/coding/drupal-ch/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:667:29
at eval (eval at create (/Users/dan/coding/drupal-ch/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
at Array.<anonymous> (/Users/dan/coding/drupal-ch/node_modules/@storybook/core/node_modules/webpack/lib/DllReferencePlugin.js:72:15)
at Storage.finished (/Users/dan/coding/drupal-ch/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /Users/dan/coding/drupal-ch/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /Users/dan/coding/drupal-ch/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! drupal-ch@1.0.0 build-storybook: `build-storybook -c storybook/.storybook -o storybook/build`The log file contains:
11 silly lifecycle drupal-ch@1.0.0~build-storybook: Returned: code: 1 signal: null
12 info lifecycle drupal-ch@1.0.0~build-storybook: Failed to exec build-storybook script
13 verbose stack Error: drupal-ch@1.0.0 build-storybook: `build-storybook -c storybook/.storybook -o storybook/build`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (/Users/dan/.nvm/versions/node/v14.14.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:315:20)
13 verbose stack at ChildProcess.<anonymous> (/Users/dan/.nvm/versions/node/v14.14.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:315:20)
13 verbose stack at maybeClose (internal/child_process.js:1048:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid drupal-ch@1.0.0
15 verbose cwd /Users/dan/coding/drupal-ch
16 verbose Darwin 19.6.0
17 verbose argv "/Users/dan/.nvm/versions/node/v14.14.0/bin/node" "/Users/dan/.nvm/versions/node/v14.14.0/bin/npm" "run" "build-storybook"
18 verbose node v14.14.0
19 verbose npm v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error drupal-ch@1.0.0 build-storybook: `build-storybook -c storybook/.storybook -o storybook/build`
22 error Exit status 1I then ran npm ls and the missing peer dependencies are:
npm ERR! peer dep missing: eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0, required by eslint-config-airbnb@18.2.1
npm ERR! peer dep missing: webpack@^1 || ^2 || ^3 || ^4, required by dotenv-webpack@1.8.0
npm ERR! peer dep missing: webpack@^4.0.0, required by webpack-dev-middleware@3.7.2
npm ERR! peer dep missing: webpack@^4.0.0, required by webpack-dev-middleware@3.7.2Output of npm ls webpack is
drupal-ch@1.0.0 /Users/dan/coding/drupal-ch
├─┬ @storybook/html@6.0.28
│ └─┬ @storybook/core@6.0.28
│ └── UNMET PEER DEPENDENCY webpack@4.44.2
└── webpack@5.4.0
npm ERR! peer dep missing: webpack@^1 || ^2 || ^3 || ^4, required by dotenv-webpack@1.8.0
npm ERR! peer dep missing: webpack@^4.0.0, required by webpack-dev-middleware@3.7.2
drupal-ch@1.0.0 /Users/dan/coding/drupal-ch
├─┬ @storybook/html@6.0.28
│ └─┬ @storybook/core@6.0.28
│ └── UNMET PEER DEPENDENCY webpack@4.44.2
└── webpack@5.4.0So I presume the npm run build-storybook command is failing because I need to wait until Storybook fully supports Webpack 5?
What's strange is that the same setup on another project which uses yarn seems to build just fine. I guess the algorithms for loading node_modules versions are slightly different between yarn and npm
For info:
› npm --version
6.14.8
› node --version
v14.14.0
› yarn --version
1.22.5
Is there a way to install this branch like the normal @storybook modules to test with it?
Yarn pack it, there's a pack function in the repos whatcha is a tarball that's usually sent to npm. You can just yarn from the tarball
TypeError: The 'compilation' argument must be an instance of Compilation happens if there are multiple webpack versions installed and used in one build
It'd be great, if Storybook gives more freedom when using:
@storybook/{APP}/standalone
No one wants to have both webpack 4 & webpack 5 installed at the same time.
If webpack was in peerDependencies from the beginning, this issue'd have never occurred.
- and for users, who don't want to spend the time on the configuration, there should have been a separate package, containing
webpackas part of its'dependencies
Currently, when using standalone, users (developers) should overwrite all bundling-related configurations of Storybook anyway, as otherwise, the working state in production is not guaranteed.
- users might end up having two conflicting ways of bundling
Therefore, at least the standalone way of bundling should be reconsidered.
I have a project with Vue 2.6 and Webpack 5. I wanted to add storybook but got an error.
Error: Compiling RuleSet failed: Properties query are unknown (at clonedRuleSet-11[0].rules[0]: [object Object])
at RuleSetCompiler.error (/home/dex/tmp/1/zzz/node_modules/webpack/lib/rules/RuleSetCompiler.js:365:10)
at RuleSetCompiler.compileRule (/home/dex/tmp/1/zzz/node_modules/webpack/lib/rules/RuleSetCompiler.js:194:15)
at /home/dex/tmp/1/zzz/node_modules/webpack/lib/rules/RuleSetCompiler.js:152:9
at Array.map (<anonymous>)
at RuleSetCompiler.compileRules (/home/dex/tmp/1/zzz/node_modules/webpack/lib/rules/RuleSetCompiler.js:151:16)
at RuleSetCompiler.compileRule (/home/dex/tmp/1/zzz/node_modules/webpack/lib/rules/RuleSetCompiler.js:182:30)
at /home/dex/tmp/1/zzz/node_modules/webpack/lib/rules/RuleSetCompiler.js:152:9
at Array.map (<anonymous>)
at RuleSetCompiler.compileRules (/home/dex/tmp/1/zzz/node_modules/webpack/lib/rules/RuleSetCompiler.js:151:16)
at cloneRule (/home/dex/tmp/1/zzz/node_modules/vue-loader/lib/plugin-webpack5.js:143:33)
at /home/dex/tmp/1/zzz/node_modules/vue-loader/lib/plugin-webpack5.js:111:25
at Array.map (<anonymous>)
at VueLoaderPlugin.apply (/home/dex/tmp/1/zzz/node_modules/vue-loader/lib/plugin-webpack5.js:111:8)
at webpack (/home/dex/tmp/1/zzz/node_modules/@storybook/core/node_modules/webpack/lib/webpack.js:51:13)
at startPreview (/home/dex/tmp/1/zzz/node_modules/@storybook/core/dist/server/dev-server.js:379:39)
at async Promise.all (index 0)
As of now, @storybook/core@6.1.1 absolutely can't tolerate webpack@^5 installed separately. I had to downgrade to webpack@4
The dotenv-webpack dependency is very far behind (current release has the right peers) 1.8.0 vs 6.0.0
does anyone know of an env variable we can use when running storybook to disable the webpack plugins that don't work with storybook for now?
Ultimately Webpack should be shipped as a peer dependency. Most folks already override storybook's webpack config; just export the pure config that sb requires and let the consumer merge it with their own. I love storybook, but these types of nested dependency conflicts have been around since its inception.
PS C:\_workspaces\dk-live-experience-player-card> npm ls webpack @dk/player-card@0.1.0 C:\_workspaces\dk-live-experience-player-card
+-- @storybook/react@6.1.10
| `-- webpack@4.44.2
`-- webpack@5.9.0
> start-storybook -p 6006
info @storybook/react v6.1.10
info
info => Using prebuilt manager
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 7 other files in "./.storybook"
info => Adding stories defined in ".storybook\main.js"
info => Using default Webpack setup
10% building 1/1 modules 0 active(node:6124) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'createSnapshot' of undefined
at Promise (C:\_workspaces\dk-live-experience-player-card\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:13:36)
at new Promise (<anonymous>)
at Object.createSnapshot (C:\_workspaces\dk-live-experience-player-card\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:12:10)
at compiledEntriesPromise.then (C:\_workspaces\dk-live-experience-player-card\node_modules\html-webpack-plugin\lib\cached-child-compiler.js:219:35)
What is the current status of webpack 5 support for storybook?
I am seeing the below errors after upgrading to webpack 5, running storybook 6.1.10
info @storybook/react v6.1.10
info
UI VERSION: dev
info => Loading presets
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 6 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
info => Using default Webpack setup
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[1].resolve has an unknown property 'fullySpecified'. These properties are valid:
ERR! object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, roots?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
ERR! -> Options for the resolver
ERR! at webpack (/Users/koryschneider/.pnpm/webpack@4.44.2_webpack-cli@4.2.0/node_modules/webpack/lib/webpack.js:31:9)
ERR! at startPreview (/Users/koryschneider/.pnpm/@storybook/core@6.1.10_ade98fd2e31b842d8797b4da9332958d/node_modules/@storybook/core/dist/server/dev-server.js:419:39)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/Users/koryschneider/.pnpm/@storybook/core@6.1.10_ade98fd2e31b842d8797b4da9332958d/node_modules/@storybook/core/dist/server/dev-server.js:494:29)
ERR! at async buildDevStandalone (/Users/koryschneider/.pnpm/@storybook/core@6.1.10_ade98fd2e31b842d8797b4da9332958d/node_modules/@storybook/core/dist/server/build-dev.js:317:33)
ERR! at async buildDev (/Users/koryschneider/.pnpm/@storybook/core@6.1.10_ade98fd2e31b842d8797b4da9332958d/node_modules/@storybook/core/dist/server/build-dev.js:380:3)
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[1].resolve has an unknown property 'fullySpecified'. These properties are valid:
ERR! object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, roots?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
ERR! -> Options for the resolver
ERR! at webpack (/Users/koryschneider/.pnpm/webpack@4.44.2_webpack-cli@4.2.0/node_modules/webpack/lib/webpack.js:31:9)
ERR! at startPreview (/Users/koryschneider/.pnpm/@storybook/core@6.1.10_ade98fd2e31b842d8797b4da9332958d/node_modules/@storybook/core/dist/server/dev-server.js:419:39)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/Users/koryschneider/.pnpm/@storybook/core@6.1.10_ade98fd2e31b842d8797b4da9332958d/node_modules/@storybook/core/dist/server/dev-server.js:494:29)
ERR! at async buildDevStandalone (/Users/koryschneider/.pnpm/@storybook/core@6.1.10_ade98fd2e31b842d8797b4da9332958d/node_modules/@storybook/core/dist/server/build-dev.js:317:33)
ERR! at async buildDev (/Users/koryschneider/.pnpm/@storybook/core@6.1.10_ade98fd2e31b842d8797b4da9332958d/node_modules/@storybook/core/dist/server/build-dev.js:380:3)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
Edit: Got storybook to run by commenting out this piece of the webpack config:
{
test: /\.m?jsx?/,
resolve: {
fullySpecified: false
}
},
Edit 2: The above causes the compile job to fail on our CI pipeline.
We have a working version of the upgrade thanks to tremendous work by @ndelangen (w/ help from @ScriptedAlchemy @jantimon and others). But we don't have specific release plans/dates yet.
It's a major breaking change and we will try to coordinate the release with Create React App and other major app frameworks. If anybody has a list of major app frameworks that have already converted, I'd love to hear about those.
Corresponding issue for CRA: facebook/create-react-app#9994
@shilman Please consider releasing some kind of alpha/beta to unblock projects that have Webpack 5 and Storybook. Even a dedicated NPM dist-tag would work.
Regarding CRA I suggest to do the same thing as any other major update — new major release with dropping old CRAs, that don't have Webpack 5. Announce that WP4 will be supported only in 6.x, set some EOL for 6.x. You will have to support both 6.x and 7.x for some time, but this kind of messaging would encourage people to upgrade. Unless Webpack/CRA would release some kind of bridge mode like Babel did.
@kirill-konshin absolutely. We haven't ruled out the idea of supporting both 4 and 5 simultaneously either. But we just got 5 working-ish days ago, so releasing anything at all has only just become an option. We'll do our best to figure something out in the next few weeks. In the meantime, suggestions and alternative solutions are always welcome. I just saw a comment on another issue where someone supposedly got webpack 5 working by commenting out a few lines of code, though I'm on my phone and don't have the link handy. Stay tuned.
@shilman thank you for the update and hard work! Highly appreciate. Any kind of NPM release is very much favorable ) I can help to test it in a number of projects with fairly different code bases.
BTW, why storybook has webpack as a dependency, not a peer dependency?
@Diokuz the integration is different for webpack 4 vs webpack 5
so if you install webpack 4 as a peer dependency and storybook uses webpack 5 apis and plugins it will not work
@shilman Any update on when we will be able to use the Webpack5-ready version? (by either pointing to a fork or to an alpha tag, for example)
@phaistonian Not yet. Hoping to figure out a release plan this week or next!
html-webpack-plugin@5 is now in beta and the feedback is promising
right now there is only one open issue with double compilations: webpack/webpack#12283
Is there any workaround while using it in a yarn workspaces repo available?
@kevinvdburgt
I was able to work around this using yarn v2 workspaces. Using v1 didn't seem to work.
I checked out #13392
- ran
yarnandyarn bootstrap- built packages (on windows it doesn't work, but you can add a command to runlerna exec --scope '@storybook/*' -- yarn pack, then copy to packsfind -name "storybook*.tgz" -type f -exec cp {} packs/ \;) - copy the packs/tgz to your project
- added overrides to point at the alpha branch into my package.json (only works with yarn)
"resolutions": {
"@storybook/addon-actions": "file:./storybook-alpha/storybook-addon-actions-v6.2.0-alpha.2.tgz",
...
Successfully builds, looks ok, watch mode works. Will test thoroughly and report back issues.
@phaistonian Not yet. Hoping to figure out a release plan this week or next!
Gentle prod, hoping for an update on the timing of this! We're a bit stuck in my project, without being able to update our storybook deployments until Webpack 5 support arrives.
Perhaps there is a branch someone is working on we can track?
@andrewmclagan Yes there is a working version here #13392
We also have a plan for how we're going to support both versions of webpack in Storybook moving forward, which is what's preventing us from releasing what's in the branch since most of our users are still on Webpack4 and we're not ready to break support for that.
Would it be possible to publish a special version on npm as a temporary hold over? e.g. @storybook/react@webpack5-alpha
I don't know how realistic supporting both versions truly is. A lot of plugins just dropped webpack 4 support in their new versions to make them compatible with webpack 5 due to the drasticness of the changes needed.
@timkindberg @ntucker hoping to get this into alpha next week #13808
what is missing for the alpha?
Mostly just packaging and testing and reviewing over in #13808. Supporting two versions side by side in the monorepo is a pain
Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.30 containing PR #13808 that references this issue. Upgrade today to the @next NPM tag to try it out!
npx sb upgrade --prerelease
Closing this issue. Please re-open if you think there's still more to do.
First version is out in alpha. Running a manual test and will update this issue with proper testing instructions soon.
Announcing Storybook Webpack 5 early access! Here's a preliminary upgrade guide https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324 to get you going.
Thanks for getting this out! I just tried it out and @storybook/builder-webpack4 still depends on webpack 4 and that is pulled in by @storybook/core-server