[6.2.7] [Webpack 5] [Laravel] [Vue] Cannot GET /

[johanvanhelden]

I am in the middle of upgrading my webpack 4 stack to webpack 5 so I can use PostCSS 8 and Tailwind 2.

When I was on webpack 4 Storybook ran great - no issues whatsoever.

Everything on the Laravel side works flawlessly and I can compile all my assets using Laravel Mix.
The only issue is getting Storybook up and running.

The reason why I mention that it is a Laravel setup is because I had another issue earlier because my project contains an .env file for Laravel and this caused an issue as well. That is why I added "dotenv-webpack" to my package.json as suggested in #14403 - at least now it seems to run and it opens my browser.

But now, when I run npm run storybook for the first time, without any Storybook cache, I get the following errors:

10% building 0/1 entries 0/0 dependencies 0/0 modulesℹ ｢wdm｣: wait until bundle finished:
(node:15480) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'createSnapshot' of undefined
    at /redacted/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13:36
    at new Promise (<anonymous>)
    at Object.createSnapshot (/redacted/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:12:10)
    at /redacted/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:219:35
(Use `node --trace-warnings ...` to show where the warning was created)
(node:15480) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:15480) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

and

19% building 2/12 entries 1562/1565 dependencies 145/458 modules(node:15480) UnhandledPromiseRejectionWarning: TypeError: compilation.getAssetPath is not a function
    at /redacted/node_modules/html-webpack-plugin/index.js:169:25
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/redacted/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at AsyncSeriesHook.lazyCompileHook (/redacted/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.emitAssets (/redacted/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:491:19)
    at onCompiled (/redacted/node_modules/@storybook/core-server/node_modules/webpack/lib/Watching.js:51:19)
    at /redacted/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/redacted/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/redacted/node_modules/tapable/lib/Hook.js:154:20)
    at /redacted/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/redacted/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/redacted/node_modules/tapable/lib/Hook.js:154:20)
    at /redacted/node_modules/@storybook/core-server/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/redacted/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/redacted/node_modules/tapable/lib/Hook.js:154:20)
    at /redacted/node_modules/@storybook/core-server/node_modules/webpack/lib/Compilation.js:1414:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/redacted/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
(node:15480) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)

And then, the process is stuck at:

99% done plugins webpack-hot-middlewarewebpack built preview d1a983e992143181b53c in 1244ms

If I cancel this, and run npm run storybook again, I get a white page with the message Cannot GET / .
As if an index file is missing.

When I run npm run build-storybook I get the following error:

10% building 0/1 entries 0/0 dependencies 0/0 modules/redacted/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:113
                        throw new TypeError(
                        ^

TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/redacted/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:113:10)
    at /redacted/node_modules/terser-webpack-plugin/dist/index.js:571:67
    at SyncHook.eval [as call] (eval at create (/redacted/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:87:1)
    at SyncHook.lazyCompileHook (/redacted/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/redacted/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:631:26)
    at /redacted/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/redacted/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/redacted/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/redacted/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:662:28)
    at /redacted/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:321:11
    at Array.<anonymous> (/redacted/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:534:20)
    at Storage.finished (/redacted/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /redacted/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at callback (/redacted/node_modules/graceful-fs/polyfills.js:299:20)
    at FSReqCallback.oncomplete (fs.js:177:21)

Steps to reproduce:

• Clone the repository: https://github.com/johanvanhelden/storybook-webpack-5-laravel
• npm install
• npm run storybook

Cancel when it's stuck it 99%

• npm run storybook
• Visit http://localhost:6006/

To verify everything is working on the Laravel side, you can run:

• npm run dev

And you will see Laravel Mix will compile the css and js in the public_html folder.

System

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
  Binaries:
    Node: 14.13.0 - ~/.nvm/versions/node/v14.13.0/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.13.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.82
  npmPackages:
    @storybook/addon-essentials: ^6.2.7 => 6.2.7
    @storybook/addon-postcss: ^2.0.0 => 2.0.0
    @storybook/builder-webpack5: ^6.2.7 => 6.2.7
    @storybook/vue: ^6.2.7 => 6.2.7

┆Issue is synchronized with this Asana task by Unito

[johanvanhelden]

@shilman

Wow, after diving into the rabbit hole even further I found out that simply installing html-webpack-plugin solves the issues. 🤯

Maybe this should be documented somewhere, because even after fully removing storybook and using the npx sb init it did not include that package.

I stumbled onto this issue and that made me want to try it out: #13332

So maybe a piece of documentation in regards to dotenv-webpack@^7.0.0 and html-webpack-plugin@^5.0.0 would prevent some people from pulling out their hair 😅

[shilman]

@johanvanhelden thanks for the follow up. was it a hoisting issue? i think builder-webpack5 and builder-webpack4 both have dependencies on these packages, so if you had to install yourself that would suggest that the wrong version was getting hoisted. WDYT?

[johanvanhelden]

I am not really sure how to check that to be honest @shilman .

With the fix, the tree for html-webpack-plugin looks like this:

├─┬ @storybook/addon-essentials@6.2.7
│ └─┬ @storybook/addon-docs@6.2.7
│   └─┬ @storybook/builder-webpack4@6.2.7
│     └── html-webpack-plugin@4.5.2 
├─┬ @storybook/builder-webpack5@6.2.7
│ └── html-webpack-plugin@5.3.1 
├─┬ @storybook/vue@6.2.7
│ └─┬ @storybook/core@6.2.7
│   └─┬ @storybook/core-server@6.2.7
│     └── html-webpack-plugin@4.5.2 
└── html-webpack-plugin@5.3.1 

And without the fix it looks like this:

├─┬ @storybook/addon-essentials@6.2.7
│ └─┬ @storybook/addon-docs@6.2.7
│   └─┬ @storybook/builder-webpack4@6.2.7
│     └── html-webpack-plugin@4.5.2 
├─┬ @storybook/builder-webpack5@6.2.7
│ └── html-webpack-plugin@5.3.1 
└─┬ @storybook/vue@6.2.7
  └─┬ @storybook/core@6.2.7
    └─┬ @storybook/core-server@6.2.7
      └── html-webpack-plugin@4.5.2  deduped

So my guess is that html-webpack-plugin@4.5.2 was being used, even tho I configured Storybook to use the webpack 5 builder, which depends on html-webpack-plugin@5.3.1