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

Created on 12 Oct 2018 · 3Comments · Source: preactjs/preact-cli

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

bug upstream

Source

hguillermo

👍1

Most helpful comment

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

daveli on 4 Mar 2019

🎉2 ❤1

All 3 comments

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';
  }
};

daveli on 4 Mar 2019

🎉2 ❤1

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) 🤕