Preact cli next bug. Widget template no longer working. ExtractTextPlugin replaced by mini-css-extract-plugin

[hguillermo]

Do you want to request a feature or report a bug? It is a bug. The css is not inlined. Preact build it is extracting the css to bundle files. The widget concept is not longer working. What is the current behaviour? This is no longer working with preact-cli next: https://github.com/preactjs-templates/widget/blob/4f6944a3337205775ab3c06571489290a61057f6/template/preact.config.js#L5 The next version uses mini-css-extract-plugin. If the current behaviour is a bug, please provide the steps to reproduce. Pretty clear to reproduce. Run preact cli using the widget template. What is the expected behaviour? It is trying to find ExtractTextPlugin which is no longer used in next If this is a feature request, what is motivation or use case for changing the behaviour? Not relevant Please mention other relevant information. Not relevant

[daveli]

I ran into the same issue and "hacked" my way around it with the following preact.config.js:

import MiniCssExtractPlugin from 'mini-css-extract-plugin';

export default (config, env) => {
  delete config.entry.polyfills;
  config.output.filename = '[name].js';

  config.plugins = config.plugins.filter(plugin => !(plugin instanceof MiniCssExtractPlugin));

  config.module.rules = config.module.rules.map(rule => {
    if (rule.use) {
      return {
        ...rule,
        use: rule.use.reduce((acc, loader) => {
          loader !== MiniCssExtractPlugin.loader ? acc.push(loader) : acc.push(
            'style-loader');

          return acc;
        }, []),
      };
    }

    return rule;
  });

  if (env.production) {
    config.output.libraryTarget = 'umd';
  }
};

Looking at the current code there is an isWatch check that does conditional check on if to use MiniCssExtractPlugin.loader or style-loader for when in watch mode. I guess this can be leveraged to make this work as a core feature...

[ollwenjones]

seems broken in other ways too. I just tried using the 'dist' build and it was choking on a lot of fairly common ES6 things, and on static asset imports (svg) 🤕

[drzraf]

Thank you @daveli! Maybe getRulesByMatchingFile could help further simplifying this workaround.

In any case, webpack-base-config.js should really be made easier to override (or given saner defaults).

[rschristian]

Closing out, widgets have long been moved off using preact-cli to build them.