question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't use with storybook due to `html-webpack-plugin` issues

See original GitHub issue

What is the current behaviour? Looks like trying to use this with storybook causes builds to stop working, because storybook uses html-webpack-plugin@4 and preact-cli uses version 3, clashing with each other. When I run preact build while both are installed, I get:


17:53:39.301 | Error: The expected HtmlWebpackPlugin hook was not found! Ensure HtmlWebpackPlugin is installed and was initialized before this plugin.
-- | --
17:53:39.301 | at HtmlWebpackExcludeAssetsPlugin.applyCompilation (/vercel/workpath0/node_modules/html-webpack-exclude-assets-plugin/index.js:25:13)
17:53:39.301 | at SyncHook.eval [as call] (eval at create (/vercel/workpath0/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:23:1)
17:53:39.302 | at SyncHook.lazyCompileHook (/vercel/workpath0/node_modules/tapable/lib/Hook.js:154:20)
17:53:39.302 | at Compiler.newCompilation (/vercel/workpath0/node_modules/webpack/lib/Compiler.js:631:26)
17:53:39.302 | at /vercel/workpath0/node_modules/webpack/lib/Compiler.js:667:29
17:53:39.302 | at AsyncSeriesHook.eval [as callAsync] (eval at create (/vercel/workpath0/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
17:53:39.302 | at AsyncSeriesHook.lazyCompileHook (/vercel/workpath0/node_modules/tapable/lib/Hook.js:154:20)
17:53:39.302 | at Compiler.compile (/vercel/workpath0/node_modules/webpack/lib/Compiler.js:662:28)
17:53:39.302 | at /vercel/workpath0/node_modules/webpack/lib/Compiler.js:321:11
17:53:39.302 | at Compiler.readRecords (/vercel/workpath0/node_modules/webpack/lib/Compiler.js:529:11)
17:53:39.302 | at /vercel/workpath0/node_modules/webpack/lib/Compiler.js:318:10
17:53:39.302 | at eval (eval at create (/vercel/workpath0/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
17:53:39.302 | at run (/vercel/workpath0/node_modules/fork-ts-checker-webpack-plugin/lib/index.js:204:13)
17:53:39.302 | at AsyncSeriesHook.eval [as callAsync] (eval at create (/vercel/workpath0/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
17:53:39.302 | at AsyncSeriesHook.lazyCompileHook (/vercel/workpath0/node_modules/tapable/lib/Hook.js:154:20)
17:53:39.302 | at /vercel/workpath0/node_modules/webpack/lib/Compiler.js:315:19

and then because of how preact works the github action/vercel build i run just goes forever and then times out after 6 hours (expensive!)

Related: https://github.com/jamesjieye/html-webpack-exclude-assets-plugin/issues/18

Steps to Reproduce create a preact app, then install storybook, and then try to run yarn build

What is the expected behaviour? the build works

Please mention any other relevant information i’ll try to add a minimal repro soon.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:19 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
ThunderArmycommented, Apr 29, 2021

Its fine, thanks for the help. Appreciate that a lot!

Removing the old dependencies for the presets i tried before and adding the one you recommended works fine, thanks.

thats a huge benefit, agreed xD

1reaction
rschristiancommented, Apr 29, 2021

Gotcha, was looking in stories/. My bad.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't use with storybook due to `html-webpack-plugin` issues
What is the current behaviour? Looks like trying to use this with storybook causes builds to stop working, because storybook uses ...
Read more >
Webpack 5 and Storybook 6 integration throws an error in ...
Basically the error is coming from the marked line in /node_modules/webpack/lib/DefinePlugin.js once running for the first time npm run ...
Read more >
Webpack - Storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >
html-webpack-plugin - npm
Simplifies creation of HTML files to serve your webpack bundles. Latest version: 5.5.0, last published: a year ago.
Read more >
How I solved and debugged my Webpack issue through trial ...
const path = require('path');const HtmlWebpackPlugin ... So let's take a look at the differences between his Webpack and package.json and ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found