Repository: storybook
Issue: build-storybook error: The 'compilation' argument must be an instance of Compilation
Labels: bug,nextjs,builder-webpack5

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