Preact-cli: Build error when trying to remove webpack MiniCssExtractPlugin plugin

[mitraSam]

Do you want to request a _feature_ or report a _bug_?

Bug
What is the current behaviour?

Preact-cli cannot build if I try to remove the MiniCssExtractPlugin plugin from within the preact.config file.

If the current behaviour is a bug, please provide the steps to reproduce.
1.I set up a brand new preact project using the preact create simple test command
2.I have a preact.config.js file in the root folder.
Inside I have the following code :

export default (config, env, helpers) => {
   const { index } = helpers.getPluginsByName(config, 'MiniCssExtractPlugin')[0];
   config.plugins.splice(index, 1)
};

3.When I run npm run build I get the following error:

`Build [== ] 10% (0.3s) building/home/dev/workspace/test/node_modules/neo-async/async.js:16
throw new Error('Callback was already called.');
^

Error: Callback was already called.
`

What is the expected behaviour?

Removing the MiniCssExtractPlugin plugin so that I can have a build that contains all the needed js+css in one single file.

If this is a feature request, what is motivation or use case for changing the behaviour?

Please mention other relevant information.

Please paste the results of preact info here.

Environment Info:
  System:
    OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz
  Binaries:
    Node: 10.21.0 - /usr/bin/node
    npm: 6.11.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.106
    Firefox: 77.0.1
  npmPackages:
    preact: ^10.1.0 => 10.4.4 
    preact-cli: ^3.0.0-rc.6 => 3.0.0-rc.14 
    preact-render-to-string: ^5.1.2 => 5.1.9 
  npmGlobalPackages:
    preact-cli: 3.0.0-rc.14

[rschristian]

This doesn't seem to be a bug, just config issue. You're removing the plugin, but not replacing it with something else. Its loader is used to bundle the styles on a prod build here and here.

The issue is that your styles are being bundled by a plugin that you removed. You'll need to replace it with a loader that does what you want.

[mitraSam]

Got it, thanks for the explanation!

[billdami]

@mitraSam were you able to resolve this, and if so can you share your solution?

I am looking to do the same thing, just completely disable MiniCssExtractPlugin so that CSS is bundled with the JS in prod builds in a single file (I am developing an "embeddable widget" type app, so having just the single file is ideal).

[rschristian]

@billdami If you're building a widget Preact-CLI really isn't the tool to use. Its focus is web applications.

Microbundle is probably the preferred tool in the Preact ecosystem, and it's what we use in the widget templates.

[billdami]

@rschristian i'm using the official widget template that the main preact-cli readme reccomends:

https://github.com/preactjs/preact-cli#official-templates

widget - Template for a widget to be embedded in another website.

https://github.com/preactjs-templates/widget

The only issue with it is that the template has an outdated version of preact-cli, using ExtractTextPlugin, which was easy to disable. But after upgrading to latest preact-cli, MiniCssExtractPlugin replaced it and does not appear to be easy to disable.

[rschristian]

You should be using the dist command then (maybe change the entry point though) -- don't really know why the build was added. Not super useful.

FWIW, I have forks of each that are much more up-to-date, think I have open PRs on both repos as well if you want to take a gander.

[billdami]

sounds good, thanks @rschristian! I'll take a look at your fork. I did try the dist/microbundle command, which didn't seem to do what I needed either, as it output separate files for the js and css, and didnt even bundle preact itself in the js file. FWIW though, I attempting to use CSS modules and TypeScript as well, not sure if that factors in at all.

[rschristian]

which didn't seem to do what I needed either, as it output separate files for the js and css,

You can inline the CSS into JS if you want with --css inline. See https://github.com/developit/microbundle#css-and-css-modules

and didnt even bundle preact itself in the js file.

It doesn't bundle dependencies by default. If you want them bundled, simply add --external none or keep everything in devDependencies. See https://github.com/developit/microbundle#all-cli-options-

[billdami]

@rschristian I tried your fork, and the microbundle command options you mentioned above, and still seem to not be having any luck, if you got a chance to see if I'm missing something obvious, I do have a test repo up here:

https://github.com/billdami/preact-ts-widget

Thanks for your help!

[rschristian]

@billdami So, just for clarity, you're looking for just UMD output, no externals, and CSS inlined?

Well, for starters, CSS Modules are mutually exclusive with inlining. You can't have both. You need build tool magic to use CSS Modules, as you're importing a CSS file as an object, but inlining states that CSS file should be imported as a string.

[billdami]

@billdami So, just for clarity, you're looking for just UMD output, no externals, and CSS inlined?

Well, for starters, CSS Modules are mutually exclusive with inlining. You can't have both. You need build tool magic to use CSS Modules, as you're importing a CSS file as an object, but inlining states that CSS file should be imported as a string.

@rschristian correct, I want a single file, that i can drop as a <script> on a webpage (that does NOT have preact/my other deps already available) and have it run in a normal browser environment. Using CSS modules is not an absolute necessity here, just a nice-to-have, if possible. The important part is that I need the CSS included in that single bundle file, however that needs to happen, not in a separate .css file.

[rschristian]

@billdami Check out https://github.com/rschristian/preact-ts-widget/

[rschristian]

@billdami

Had a bit more time, made a few more touch ups. CSS will be automatically injected into the head now.

I'd also like to say you probably should be using ES/Modern output from Microbundle. It's smaller and will be supported in all recent browsers. Modern, the absolute latest you can go, sees 95% global adoption. ES gets a couple more points. UMD is likely super unnecessary.

Also, removing the --no-compress saves you like 1/3 of the bundle, so you will likely want compression.

Feel free to add a `" into that HTML template and just load in in your browser to test it out. Should fulfill your needs, hopefully.