[issue] Extractor is undefined

[rtm619]

Hi,

When I'm trying to use a custom extractor with purgecss, its throwing this error:

(node:1588) DeprecationWarning: Chunk.mapModules: Use Array.from(chunk.modulesIterable, fn) instead
(node:1588) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'extractor' of undefined
    at e.value (D:\Workspace\NextJS\contentful-nextjs-now-boilerplate\node_modules\next-purgecss\node_modules\purgecss\lib\purgecss.js:1:8829)

My next.config.js

const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const withCSS = require('@zeit/next-css');
const withImages = require('next-images');
const withPurgeCss = require('next-purgecss');
const withPlugins = require('next-compose-plugins');

require('dotenv').config();

class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:/]+/g) || [];
  }
}

const nextConfig = {
  webpack: (config, { dev }) => {
    config.plugins.push(new webpack.EnvironmentPlugin(process.env));

    return config;
  },
  useFileSystemPublicRoutes: false,
};

module.exports = withPlugins(
  [
    [
      withPurgeCss,
      {
        purgeCssPaths: ['pages/**/*', 'components/**/*', 'utils/**/*'],
        purgeCss: {
          extractors: [
            {
              extractor: TailwindExtractor,

              // Specify the file extensions to include when scanning for
              // class names.
              extensions: ['js'],
            },
          ],
        },
      },
    ],
    withCSS,
    withImages,
  ],
  nextConfig
);

I noticed that the purgecss-webpack-plugin is outdated. Is that why I can't use extractors? My next-purgecss version is 2.0.0

[lucleray]

I published a new version 3.0.0 of next-purgecss, so you can try with the latest purgecss-webpack-plugin version.

If the issue is still there, it's probably an issue with purgecss (maybe this : https://github.com/FullHuman/purgecss/issues/95). This plugin only passes configuration down to purgecss-webpack-plugin and purgecss.

[liborvanek]

Just to save some time for future googlers – if your purgeCssPaths is too generic (with wildcards) and the path contains files with extensions not specified in extractors.extensions, you'll get TypeError: Cannot read property 'extractor' of undefined. You either have to include all extensions existing in your path or narrow the path.

purgeCssPaths: [
  // Only classes present in following files will make it to the final build
  'src/**/*.js',
  'src/**/*.jsx',
  'src/**/*.ts',
  'src/**/*.tsx',
  'src/**/*.svg',
  'src/**/*.html',
],
purgeCss: {
  extractors: [
    {
      extractor: TailwindExtractor,
      extensions: ['js', 'jsx', 'ts', 'tsx', 'svg', 'html'],
    },
  ],
}