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: 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.

[osdiab]

Worked around by explicitly adding [email protected] 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 [email protected] 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

[rschristian]

Sorry, but what do I need to do here to reproduce your issue? You seem to have no CSS module usage in your storybook stuff?

[ThunderArmy]

The problem is storybook won't load the css class within button.js https://github.com/ThunderArmy/preact-storybook-test-demo/blob/main/src/components/button/index.js

[rschristian]

Gotcha, was looking in stories/. My bad.

[rschristian]

@ThunderArmy Sorry for the delay, got side tracked.

I just did a quick search and it seems like someone's created a package to do this, worked with a simple install + adding to your config: https://github.com/Negan1911/storybook-css-modules-preset. Gets ~50k downloads a month from NPM, and works with Preact-CLI too. You'll just need to make your CSS files .module.css and it will work right out of the box.

Plus, if it stops working, that's someone else's job to fix, lol. Benefits of not owning the config.

[ThunderArmy]

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