[Webpack5] Non-built `.less` files in production

Hello 👋 !

I'm currenlty having some trouble configuring Playroom. We've recently updated our build to use Webpack5. We then updated Playroom to version 0.26.0, since it's the first version that supports Webpack5.

Running playroom --config ./playroom/playroom.config.js start after the update to v0.26.0 we get this error:

error  in ./node_modules/playroom/src/Playroom/icons/ChevronIcon.less

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/Users/node_modules/postcss/lib/processor.js:168:15)
    at new Processor (/Users/node_modules/postcss/lib/processor.js:52:25)
    at postcss (/Users/ink/node_modules/postcss/lib/postcss.js:55:10)
    at Object.loader (/Users/node_modules/postcss-loader/dist/index.js:87:20)

I neither have Less nor postcss in my project, so I believe this is related directly to the Playroom build itself. These Errors occur on every single less file inside Playroom.

My playroom.config.js is as follows:

const webpack = require('webpack');
const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;
const snippets = require('../shared/snippets-loader.js');

const styledComponentsTransformer = createStyledComponentsTransformer();

const isProduction = process.env.NODE_ENV === 'production';

const getPublicPath = () => {
  if (isProduction) return '/playroom/';
  return '/';
};

module.exports = {
  components: './playroom/components.ts',
  outputPath: './docs/static/playroom/',
  title: 'Example',
  themes: undefined,
  snippets: './playroom/snippets.tsx',
  frameComponent: './playroom/FrameComponent.tsx',
  widths: [1440, 1280, 375, 1920, 768, 'calc(100vw - 120px)', '100vw'],
  port: 9002,
  openBrowser: false,
  exampleCode: '',
  typeScriptFiles: ['src/**/*', '!node_modules', '!**/*.spec.ts', '!**/*.spec.tsx'],
  cwd: '.',
  webpackConfig: () => ({
    output: {
      publicPath: getPublicPath(),
    },
    plugins: [
      new webpack.DefinePlugin({
        __SNIPPETS__: JSON.stringify(snippets),
      }),
    ],
    module: {
      rules: [
        {
          test: /\.(js|jsx|mjs)$/,
          enforce: 'pre',
          exclude: /node_modules/,
          use: 'eslint-loader',
        },
        {
          oneOf: [
            {
              test: /\.jsx?$/,
              exclude: /node_modules/,
              use: 'babel-loader',
            },
            {
              test: /\.tsx?$/,
              exclude: /node_modules/,
              loader: 'ts-loader',
              options: {
                getCustomTransformers: () => ({ before: [styledComponentsTransformer] }),
              },
            },
            {
              test: /\.(c|sa|sc)ss$/,
              use: ['style-loader', 'css-loader', 'sass-loader'],
              exclude: /node_modules/,
            },
            {
              test: /\.(woff(2)?|ttf|eot|svg|png|jpg|jpeg)(\?v=\d+\.\d+\.\d+)?$/,
              exclude: /node_modules/,
              use: [
                {
                  loader: 'file-loader',
                  options: {
                    name: '[name].[ext]',
                    outputPath: isProduction ? './fonts' : 'fonts/',
                    publicPath: isProduction ? '/playroom/fonts/' : 'fonts/',
                  },
                },
              ],
            },
          ],
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.ts', '.tsx'],
    },
  }),
};

It's pretty standard, but I've already tried everything with this file. Maybe I'm looking in the wrong place here?

Versions

node => 12.22.1
yarn => 1.22.10
webpack => 5.53.0
playroom => 0.26.0

Upgrading Playroom to the newest version is not an option because this problem still persists and of issue https://github.com/seek-oss/playroom/issues/236.

seek-oss / playroom

[Webpack5] Non-built `.less` files in production #245

Versions