storybook 🚀 - Webpack 5 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

shilman on 22 Dec 2019

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 on 18 Apr 2020

@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 on 18 Apr 2020

@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 on 18 Apr 2020

@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.
``` info => Adding stories defined in ".storybook/main.js".
/*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 on 22 Apr 2020

❤14

@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 on 22 Apr 2020

@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 on 23 Apr 2020

👍1

@shilman makes sense. Anyway, if you can publish something like an early beta of it, I'll do my best to help.

kirill-konshin on 23 Apr 2020

👍1

Thanks @kirill-konshin!! Much appreciated 🙏🙏🙏

shilman on 23 Apr 2020

I will take it. Let's see how difficult it will be :)

7rulnik on 25 Jun 2020

👍2

@7rulnik awesome!!! i think @ndelangen has also started looking at this

shilman on 26 Jun 2020

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

ndelangen on 26 Jun 2020

❤4 👍4

Could you open WIP pr so we can track progress?

7rulnik on 26 Jun 2020

Certainly:
https://github.com/storybookjs/storybook/pull/11326

ndelangen on 26 Jun 2020

❤2 👍1

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 on 9 Sep 2020

👍1

@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!

ndelangen on 10 Sep 2020

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 https://github.com/sysgears/webpack-virtual-modules/issues/43 is now resolved. One step closer to the goal.

kirill-konshin on 11 Sep 2020

🚀3

@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?

daveisfera on 11 Sep 2020

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

alexander-akait on 15 Sep 2020

👍1

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?

ndelangen on 23 Sep 2020

Virtual modules isn't the most optimal solution. But I've used this with early versions of webpack 5

ScriptedAlchemy on 26 Sep 2020

Webpack 5 is released https://webpack.js.org/blog/2020-10-10-webpack-5-release/

malyw on 11 Oct 2020

🚀5

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 :/

felixfbecker on 11 Oct 2020

👀7 👍3

Yeah this is a tricky one. You need to put it in a monorepo and no-hoist webpack. That's resolved it previously

ScriptedAlchemy on 14 Oct 2020

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

daveisfera on 14 Oct 2020

👍1

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/**]

ScriptedAlchemy on 14 Oct 2020

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 "[email protected]"
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#[email protected]"
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#[email protected]"
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"
  }

tobilen on 14 Oct 2020

Remove webpack from the root package json. Only install webpack in the child package json otherwise webpack 5 is hoisted to the top.

ScriptedAlchemy on 14 Oct 2020

❤1

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 on 14 Oct 2020

@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 on 14 Oct 2020

😕5

@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 on 15 Oct 2020

@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

luisFilipePT on 19 Oct 2020

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 😕

ScriptedAlchemy on 22 Oct 2020

❤6

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 (https://github.com/storybookjs/storybook/issues/9216#issuecomment-708308554). 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).

tobilen on 22 Oct 2020

Thanks so much @ScriptedAlchemy. I believe you and @ndelangen started on this here: https://github.com/storybookjs/storybook/pull/11326

shilman on 22 Oct 2020

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 on 22 Oct 2020

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)

shobhitsharma on 22 Oct 2020

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.

ScriptedAlchemy on 23 Oct 2020

👍4

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?

bourdakos1 on 27 Oct 2020

PR the plugin it should be setting webpack as a dep

ScriptedAlchemy on 28 Oct 2020

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"
  },

https://github.com/jantimon/html-webpack-plugin/blob/6bff0c139ae8497483cd756ba5bb8386a96a5c88/package.json#L63-L65

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:

https://github.com/webpack/webpack/blob/92cb047a9cb7eb71823cfbf4a9c4d6367bbb5166/lib/javascript/JavascriptModulesPlugin.js#L112-L122

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?

jantimon on 28 Oct 2020

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.

sokra on 28 Oct 2020

👍1

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.

0407chan on 29 Oct 2020

I'll pull the branch tomorrow and see if theres anything left. Will report back any tasks or issues remaining

ScriptedAlchemy on 29 Oct 2020

👍6

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

ScriptedAlchemy on 31 Oct 2020

❤3 👍3

Related: We released https://github.com/storybookjs/storybook/pull/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

shilman on 31 Oct 2020

stupid question, but itll save me time. Wheres the webpack config that drives storybook. The caching config isn't valid

ScriptedAlchemy on 31 Oct 2020

@ScriptedAlchemy There are two of them:

https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/manager/manager-webpack.config.js

https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/preview/iframe-webpack.config.js

shilman on 31 Oct 2020

❤1

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)

ScriptedAlchemy on 31 Oct 2020

Sorry I'm on my phone now. I can pair on this in 1h if that's helpful. @ScriptedAlchemy

shilman on 31 Oct 2020

Okay, i got everything working. Sorting out webpack-virtual-modules
https://github.com/sysgears/webpack-virtual-modules/issues/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.

```

ScriptedAlchemy on 31 Oct 2020

❤2

https://github.com/storybookjs/storybook/pull/12964

Its not 100% perfect, but it builds

ScriptedAlchemy on 31 Oct 2020

❤5

@ScriptedAlchemy ypu can use node --trace-deprecation node_modules/.bin/storybook

to get more information about those deprecation warnings:

https://nodejs.org/api/cli.html#cli_trace_deprecation

jantimon on 31 Oct 2020

👍2

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😂

ScriptedAlchemy on 31 Oct 2020

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 https://github.com/webpack/webpack/issues/11467#issuecomment-708643142 )

daveisfera on 31 Oct 2020

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.

ScriptedAlchemy on 31 Oct 2020

Working through upgrading packages now. Need to modify ncu as the lerna update wizard doesn't work on this project.

ScriptedAlchemy on 31 Oct 2020

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 on 1 Nov 2020

@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

jantimon on 1 Nov 2020

👍3 ❤1

Now getting only the following TS errors during build.

uilt: @storybook/[email protected]
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/[email protected] 
error Command failed with exit code 1.

TS continues to be my least favorite piece of text to encounter 😂

ScriptedAlchemy on 2 Nov 2020

👀1

Automention: Hey @igor-dv, you've been tagged! Can you give a hand here?

github-actions[bot] on 2 Nov 2020

@ScriptedAlchemy that error looks like there are version mismatches between packages of storybook

ndelangen on 2 Nov 2020

@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.

ScriptedAlchemy on 3 Nov 2020

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

ScriptedAlchemy on 3 Nov 2020

🎉1

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)

ScriptedAlchemy on 3 Nov 2020

👀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

ScriptedAlchemy on 3 Nov 2020

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! [email protected] build-storybook: `build-storybook -c storybook/.storybook -o storybook/build`

The log file contains:

11 silly lifecycle [email protected]~build-storybook: Returned: code: 1  signal: null
12 info lifecycle [email protected]~build-storybook: Failed to exec build-storybook script
13 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] build-storybook: `build-storybook -c storybook/.storybook -o storybook/build`
22 error Exit status 1

I 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 [email protected]
npm ERR! peer dep missing: webpack@^1 || ^2 || ^3 || ^4, required by [email protected]
npm ERR! peer dep missing: webpack@^4.0.0, required by [email protected]
npm ERR! peer dep missing: webpack@^4.0.0, required by [email protected]

Output of npm ls webpack is

[email protected] /Users/dan/coding/drupal-ch
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └── UNMET PEER DEPENDENCY [email protected]
└── [email protected]

npm ERR! peer dep missing: webpack@^1 || ^2 || ^3 || ^4, required by [email protected]
npm ERR! peer dep missing: webpack@^4.0.0, required by [email protected]
[email protected] /Users/dan/coding/drupal-ch
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └── UNMET PEER DEPENDENCY [email protected]
└── [email protected]

So 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

dan2k3k4 on 11 Nov 2020

12964

Is there a way to install this branch like the normal @storybook modules to test with it?

daveisfera on 11 Nov 2020

👀5

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

ScriptedAlchemy on 14 Nov 2020

TypeError: The 'compilation' argument must be an instance of Compilation happens if there are multiple webpack versions installed and used in one build

jantimon on 14 Nov 2020

👍3

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 webpack as 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.

o-alexandrov on 19 Nov 2020

👍3

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/[email protected] absolutely can't tolerate webpack@^5 installed separately. I had to downgrade to webpack@4

visitador on 20 Nov 2020

The dotenv-webpack dependency is very far behind (current release has the right peers) 1.8.0 vs 6.0.0

krainboltgreene on 26 Nov 2020

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?

JamesGelok on 6 Dec 2020

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/[email protected] C:\_workspaces\dk-live-experience-player-card
+-- @storybook/[email protected]
| `-- [email protected]
`-- [email protected]

> 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)

mikechabot on 8 Dec 2020

❤1 👍1

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/[email protected][email protected]/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at startPreview (/Users/koryschneider/.pnpm/@storybook/[email protected]_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/[email protected]_ade98fd2e31b842d8797b4da9332958d/node_modules/@storybook/core/dist/server/dev-server.js:494:29)
ERR!     at async buildDevStandalone (/Users/koryschneider/.pnpm/@storybook/[email protected]_ade98fd2e31b842d8797b4da9332958d/node_modules/@storybook/core/dist/server/build-dev.js:317:33)
ERR!     at async buildDev (/Users/koryschneider/.pnpm/@storybook/[email protected]_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/[email protected][email protected]/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at startPreview (/Users/koryschneider/.pnpm/@storybook/[email protected]_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/[email protected]_ade98fd2e31b842d8797b4da9332958d/node_modules/@storybook/core/dist/server/dev-server.js:494:29)
ERR!     at async buildDevStandalone (/Users/koryschneider/.pnpm/@storybook/[email protected]_ade98fd2e31b842d8797b4da9332958d/node_modules/@storybook/core/dist/server/build-dev.js:317:33)
ERR!     at async buildDev (/Users/koryschneider/.pnpm/@storybook/[email protected]_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.

KorySchneider on 10 Dec 2020

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.

shilman on 10 Dec 2020

❤2 🎉2 👍1

Corresponding issue for CRA: https://github.com/facebook/create-react-app/issues/9994

Hypnosphi on 10 Dec 2020

❤3

@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 on 10 Dec 2020

👍2

@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 on 10 Dec 2020

👍12

@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.

kirill-konshin on 10 Dec 2020

👍5

Storybook: Webpack 5 upgrade

Most helpful comment

All 81 comments

12964

Related issues