[Webpack5] Non-built `.less` files in production
Closed this issue ยท 1 comments
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 #236.
Adding both postcss
AND autoprefixer
as devDependencies
fixes the issue even in the newest version.
Fix:
yarn add -D postcss autoprefixer
Versions:
"autoprefixer": "10.3.5",
"playroom": "0.27.7",
"postcss": "8.3.7",