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

[osdiab]

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: jamesjieye/html-webpack-exclude-assets-plugin#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.

[osdiab]

Worked around by explicitly adding html-webpack-plugin@3.2.0 as a dependency on my repo, and then yarn picks up the correct version.

[rschristian]

Yeah @storybook/preact ends up dragging in "html-webpack-plugin": "^4.0.0" which is going to cause issues as we're a bit behind the Webpack releases here. I wouldn't recommend installing html-webpack-plugin@3.2.0 over the top of it, as now you have both versions installed at once. That's not unlikely to break in a weird fashion that you might not expect.

I'd stick with a version of @storybook/preact that keeps html-webpack-plugin below v4

[ThunderArmy]

Is this error related to the same reason?

× ERROR ./routes/home/style.css
Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap?, implementation? }
    at validate (.\node_modules\postcss-loader\node_modules\schema-utils\dist\validate.js:104:11)
    at Object.loader (.\node_modules\postcss-loader\dist\index.js:43:29)
 @ ./routes/home/style.css 2:26-163 53:4-74:5 56:18-155
 @ ../node_modules/babel-loader/lib??ref--4!./routes/home/index.js
 @ ./routes/home/index.js
 @ ./components/app.js
 @ ./index.js
 @ P:/nvm/v14.16.1/node_modules/preact-cli/lib/lib/entry.js

[rschristian]

@ThunderArmy Have you added another version of postcss-loader?

[ThunderArmy]

Nope, i just ran npx sb init and it added these dependencies

    "@babel/core": "^7.13.16",
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/preact": "^6.2.9",
    "babel-loader": "^8.2.2",
    "core-js": "^3.11.1",

[rschristian]

@ThunderArmy Ah, yeah, storybook pulls in another version. You might need to use another version of storybook, or, if you can, try it with Yarn. On my own system, Yarn 1 can handle that just fine. It'll use the correct version of postcss-loader. NPM 6.14.11 trips over itself though.

Might not be a valid option for you, but thought I'd mention it nonetheless.

[ThunderArmy]

Yup, uninstalling it and using yarn works fine, but now i cannot get storybook to load the default components

[ThunderArmy]

Okay apparently i had both the react and the preact version installed with caused issues

after removing the react version of storybook it seems to load the stories just fine

[ThunderArmy]

@rschristian After trying to add my own component its not using classes I assign to it

import { h } from 'preact';
import style from './style.css';
import PropTypes from "prop-types";

const Button = ({backgroundColor, label, ...props}) => (
    <button className={style.Button} type="button"
            style={backgroundColor && { backgroundColor }}
            {...props}>{label}</button>
);

Although the code explicitly adds a class using classname={style.Button} the button is not using it in storybook.
Seems like its an issue with the css loader in webpack but i can't get it to work.

Any ideas what that might come from?

[rschristian]

I've never touched storybook, but we enable CSS modules for routes/ and components/ directories automatically here.

I'm not sure how storybook works. You run a separate CLI with it, right? Probably need to enable CSS modules for those directories too.

[ThunderArmy]

I can't get it to work, even after adding css-modules using their templates

Nevertheless its an issue on their side and not on preact's

[rschristian]

Have a repo you can share? I can try to take a look soon here after I finish dinner.

[ThunderArmy]

That would be awesome.

I can quickly try to set up a test repo

[ThunderArmy]

Alright, repo is up under https://github.com/ThunderArmy/preact-storybook-test-demo