search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.56k stars 9.15k forks source link

build-storybook error: The 'compilation' argument must be an instance of Compilation #17014

Open coreybruyere opened 2 years ago

coreybruyere commented 2 years ago

Describe the bug

Using default Webpack4 setup
0% compilingERR! TypeError: The 'compilation' argument must be an instance of Compilation

To Reproduce I'm trying to run npm run build-storybook and getting the error above. I've seen mentions about misaligned webpack versions. I don't have webpack as a defined dep. Using StoryBook inside of a NextJS app.

System

  System:
    OS: macOS 11.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 17.2.0 - /usr/local/bin/node
    npm: 8.1.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Firefox: 94.0.2
    Safari: 14.1
  npmPackages:
    @storybook/addon-a11y: ^6.4.8 => 6.4.8
    @storybook/addon-actions: ^6.4.8 => 6.4.8
    @storybook/addon-docs: ^6.4.8 => 6.4.8
    @storybook/addon-essentials: ^6.4.8 => 6.4.8
    @storybook/addon-links: ^6.4.8 => 6.4.8
    @storybook/preset-scss: ^1.0.3 => 1.0.3
    @storybook/react: ^6.4.8 => 6.4.8

Additional context npm run build-storybook results in this error:

info @storybook/react v6.4.8
info
info => Cleaning outputDir: /Users/cbproject/storybook-static
info => Loading presets
info Found existing addon "@storybook/addon-docs", skipping.
info => Loading custom manager config
info => Compiling manager..
info => Compiling preview..
info => Loading custom manager config
info => Using implicit CSS loaders
info => Using default Webpack4 setup
0% compilingERR! TypeError: The 'compilation' argument must be an instance of Compilation
ERR!     at Function.getCompilationHooks (/Users/cbproject/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141:10)
ERR!     at /Users/cbproject/node_modules/terser-webpack-plugin/dist/index.js:566:67
ERR!     at SyncHook.eval [as call] (eval at create (/Users/cbproject/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:89:1)
ERR!     at SyncHook.lazyCompileHook (/Users/cbproject/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.newCompilation (/Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:631:26)
ERR!     at /Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:667:29
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/cbproject/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/cbproject/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.compile (/Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:662:28)
ERR!     at /Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:321:11
ERR!     at Compiler.readRecords (/Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:529:11)
ERR!     at /Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:318:10
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/cbproject/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/cbproject/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:315:19
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/cbproject/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!  TypeError: The 'compilation' argument must be an instance of Compilation
ERR!     at Function.getCompilationHooks (/Users/cbproject/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141:10)
ERR!     at /Users/cbproject/node_modules/terser-webpack-plugin/dist/index.js:566:67
ERR!     at SyncHook.eval [as call] (eval at create (/Users/cbproject/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:89:1)
ERR!     at SyncHook.lazyCompileHook (/Users/cbproject/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.newCompilation (/Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:631:26)
ERR!     at /Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:667:29
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/cbproject/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/cbproject/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.compile (/Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:662:28)
ERR!     at /Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:321:11
ERR!     at Compiler.readRecords (/Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:529:11)
ERR!     at /Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:318:10
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/cbproject/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/cbproject/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/cbproject/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:315:19
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/cbproject/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
shilman commented 2 years ago

@coreybruyere I wonder if you need to use the Webpack5 builder because NextJS is on Webpack5. That shouldn't be the case, but I'd give it a try: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5-manager-build

israelKusayev commented 2 years ago

I encountered this error too (I'm using create-react-app) I'm on storybook version ~6.3.12 (because I cannot upgrade to a newer version) and I upgraded react-scripts to version 5.0.0 as well as @storybook/preset-create-react-app to 4.0.0

shilman commented 2 years ago

@israelKusayev have you tried using webpack5 builder?

israelKusayev commented 2 years ago

@shilman what do you mean? React scripts version 5 internally uses webpack5 (When you use create react app you don’t have control on webpack version and config )

shilman commented 2 years ago

Storybook has a webpack5 builder

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5

coreybruyere commented 2 years ago

Looks like I'm able to successfully build by following these storybook docs for migrating from 6.2.x to 6.3.0.

For reference, this is a fresh storybook setup (post 6.3.0) and I was receiving this error.

shilman commented 2 years ago

@coreybruyere i'm glad to hear you got it sorted. do you happen know which step fixed the problem for you? or how I might reproduce the problem on a fresh project? thanks! 🙏

bogdanconstantinescu commented 2 years ago

I had the same issue while updating to 6.4.18 with Angular 13. The issue is caused by having multiple versions of webpack in the same repo.

What I did is to run npm ls webpack and see that in my case there were both 5.68.0 and 5.67.0 installed. To fix the issue I've added "webpack": "5.67.0" to my devDependencies in package.json, and also an override for webpack in package.json.

"overrides": {
    "webpack": "5.67.0"
 }

After doing this, everything works again.

cloakedninjas commented 2 years ago

I've just got this myself - wondering which version of webpack is causing the issue

npm ls webpack result:

my-project@0.0.1 /work/my-project
├─┬ @angular-devkit/build-angular@14.0.5
│ └── webpack@5.72.1
├─┬ @storybook/addon-controls@6.5.9
│ └─┬ @storybook/core-common@6.5.9
│   └── webpack@4.46.0
├─┬ @storybook/addon-storyshots@6.5.9
│ └─┬ @storybook/core@6.5.9
│   └─┬ @storybook/core-server@6.5.9
│     ├─┬ @storybook/builder-webpack4@6.5.9
│     │ └── UNMET PEER DEPENDENCY webpack@4.46.0
│     ├─┬ @storybook/manager-webpack4@6.5.9
│     │ └── webpack@4.46.0
│     └── webpack@4.46.0
├─┬ @storybook/angular@6.5.9
│ └── webpack@5.70.0  deduped
├─┬ @storybook/builder-webpack5@6.5.9
│ └── webpack@5.70.0  deduped
├─┬ @storybook/manager-webpack5@6.5.9
│ └── webpack@5.70.0  deduped
└── webpack@5.70.0

Puzzled as to why Storybook's own addons controls & storyshots are requesting Webpack 4 🤔

DerZyklop commented 1 year ago

This guy solved a similar error by walking into the opposite direction than @bogdanconstantinescu did: https://github.com/angular/angular-cli/issues/20773#issuecomment-845426252

DerZyklop commented 1 year ago

Also if you have a resolutions block inside you package.json, you should read this https://github.com/angular/angular-cli/issues/20773#issuecomment-856152119

DerZyklop commented 1 year ago

I have the same error. Sadly, none of the three above-mentioned solutions work for me. 

$ npx sb@next info

Environment Info:

  System:
    OS: macOS 12.2
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 103.0.2
    Safari: 15.3
  npmPackages:
    @storybook/addon-actions: 6.5.10 => 6.5.10 
    @storybook/addon-docs: 6.5.10 => 6.5.10 
    @storybook/addon-essentials: 6.5.10 => 6.5.10 
    @storybook/addon-links: 6.5.10 => 6.5.10 
    @storybook/addon-viewport: 6.5.10 => 6.5.10 
    @storybook/angular: 6.5.10 => 6.5.10 
    @storybook/builder-webpack5: 6.5.10 => 6.5.10 
    @storybook/cli: 6.5.10 => 6.5.10 
    @storybook/manager-webpack5: 6.5.10 => 6.5.10
stichiboi commented 1 year ago

I followed the Manually steps in the migration guide

npm install @storybook/builder-webpack5 @storybook/manager-webpack5 --save-dev

In the .storybook/main.js

module.exports = {
    core: {
        builder: 'webpack5',
    }
}
vhoyer commented 1 year ago

I'm getting the same erro, but I'm using:

  framework: '@storybook/vue3',
  core: {
    builder: '@storybook/builder-vite',
  },

I currently have webpack@4 installed due to another build unrelated to the project that storybook builds with, but I need to update it to webpack@5 now, and despite the fact I'm using builder-vite, this error still shows, donno, didn't get why

shilman commented 1 year ago

@vhoyer 6.x uses the webpack to build storybook's "manager UI" (the sidebar/toolbar/addons). we've gotten rid of this entirely in 7.0 so you can use vite without any webpack deps. but for now you're def getting some interplay between webpack5 in your project and webpack4 that's used to build the manager by default.

there might not be a good workaround since i don't think we allow you to set the manager builder independently of the preview builder

  const builderPackage = ['webpack5', '@storybook/builder-webpack5'].includes(builderName)
    ? require.resolve('@storybook/manager-webpack5', { paths: [main] })
    : '@storybook/manager-webpack4';

so you might be able to fix the issue by (1) switching to builder-webpack5 across the board, (2) getting rid of your webpack5 dependencies, (3) potentially using some kind of yarn/npm resolutions hack.

or you could upgrade to 7.0-alpha, which is dramatically faster & has much better vite support, but is still prerelease. we'll hopefully release a beta in the next couple months

npx sb@next upgrade --prerelease
dudek-igor commented 1 year ago

Hello everyone the bug was created by diffrent webpack version in one project. For me, using npm install --legacy-peer-deps solved the problem!

Looking forward for storybook v7 !