Basic configuration fails

[futuraprime]

I've got a fresh install of CSS blocks' webpack/JSX integration, but I'm running into errors trying to get it rolling.

Here is my webpack config (basically copied straight from the webpack plugin README):

const webpack = require('webpack');

const jsxCompilationOptions = {
  compilationOptions: {},
  types: 'none',
  aliases: {},
  optimization: {
    rewriteIdents: true,
    mergeDeclarations: true,
    removeUnusedStyles: true,
    conflictResolution: true,
    enabled: false
  }
};

const entry = './src/index.client.jsx';

const CssBlocks = require('@css-blocks/jsx');
const CssBlocksPlugin = require('@css-blocks/webpack').CssBlocksPlugin;
const CssBlockRewriter = new CssBlocks.Rewriter();
const CssBlockAnalyzer = new CssBlocks.Analyzer(entry, jsxCompilationOptions);

module.exports = {
  entry,
  target: 'web',
  externals: './node_modules/**',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('babel-loader'),
            options: {
              plugins: [
                require('@css-blocks/jsx/dist/src/transformer/babel').makePlugin(
                  {
                    rewriter: CssBlockRewriter
                  }
                )
              ],
              cacheDirectory: true,
              compact: true,
              parserOpts: {
                plugins: ['jsx']
              }
            }
          },
          {
            loader: require.resolve('@css-blocks/webpack/dist/src/loader'),
            options: {
              analyzer: CssBlockAnalyzer,
              rewriter: CssBlockRewriter
            }
          }
        ]
      }
    ]
  },
  mode: 'development',
  plugins: [
    new CssBlocksPlugin({
      name: 'css-blocks',
      outputCssFile: './dist/main.css',
      analyzer: CssBlockAnalyzer,
      compilationOptions: jsxCompilationOptions.compilationOptions,
      optimization: jsxCompilationOptions.optimization
    })
  ]
};

And here is the error I get trying to run webpack:

webpack is watching the files…

(node:66816) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/economist/serverless-contact-sheet/node_modules/@css-blocks/webpack/dist/src/Plugin.js:135
            compilation.fileDependencies.push(...discoveredFiles);
                                         ^

TypeError: compilation.fileDependencies.push is not a function
    at compiler.plugin (/economist/serverless-contact-sheet/node_modules/@css-blocks/webpack/dist/src/Plugin.js:135:42)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/economist/serverless-contact-sheet/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/economist/serverless-contact-sheet/node_modules/tapable/lib/Hook.js:35:21)

What's going on here?

[amiller-gh]

What version of webpack are you using?

[futuraprime]

I’m on 4.16.3.

…

On Mon, 13 Aug 2018 at 22:09, Adam Miller ***@***.***> wrote: What version of webpack are you using? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#189 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AALF-EfxiHLKj-Ma8OgMFVBGwS-BOL58ks5uQesWgaJpZM4V6zlh> .

[amiller-gh]

The Webpack integration currently only works with Webpack 3 – it was put together before Webpack 4 came out and the integration code hasn't been touched since...

We need to take another pass at the Webpack code to both Support v4 and improve the Webpack integration story as a whole! There is a lot of room for improvement.

I'm working on a number of changes to the core Analyzer and Rewriter APIs that will help with the next iteration of all integrations, but that work I'm doing can happen at the same time as a rewrite of the Webpack plugin for 4.0 from someone who really wants to dig in to it!

[futuraprime]

Oh I see. My error then, sorry!

[atomless]

Hi. After an exhaustive review of options for css in components, CSS-Blocks really does seem to offer everything. With Webpack nearing v5, is there any update on the state of the CSS-Blocks webpack integration?