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

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)

About this issue

  • Original URL
  • State: open
  • Created 3 years ago
  • Reactions: 17
  • Comments: 16 (5 by maintainers)

Most upvoted comments

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.

+7
bogdanconstantinescu on Feb 10, 2022

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',
    }
}
+6
stichiboi on Sep 24, 2022

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.

+4
coreybruyere on Dec 27, 2021

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
+3
DerZyklop on Aug 15, 2022

@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
+2
shilman on Oct 26, 2022
Read more comments on GitHub
← storybook: build-storybook doesn't respect tsconfig.json baseUrl config (Module not found: Error: Can't resolve 'components')
storybook: build-storybook failing: Unexpected token: name (Service) →