production build breaks with optimization, if webpack plugin creates less file

[dominikspiertz]

Current Behavior

We updated from nx 12 to nx 13. We opted into webpack 5 while using nx 12, to make sure our custom webpack-config will not break when updating, and it was working fine. But right now we get an error, unregarding we opted into webpack 5. The error occurs, while using a webpack plugin that creates a less file inside the production build. If optimization is false, it works. Otherwise the app will not compile a production build. The reproduction is very specific, since we use a plugin to generate a theme for our ant.design library of react-components. But I guess the errors origin is related to a loader configuration or similar, since it was working before with webpack 5 and nx 12.

Expected Behavior

The flag optimization should work with a production build of a react application, when custom webpack plugins are used, that generate .less files.

Steps to Reproduce

1. Create a react-application
2. Create a custom webpack-config and add it to the project configuration, with the following contents:

   
   const { join } = require('path')
   const getWebpackConfig = require('@nrwl/react/plugins/webpack')
   const AntDesignThemePlugin = require('antd-theme-webpack-plugin')
   const { getLessVars } = require('antd-theme-generator')

const antdVarFile = join(__dirname, '../../antd.less')

module.exports = (config) => { const cfg = getWebpackConfig(config)

cfg.plugins = [ ...cfg.plugins, new AntDesignThemePlugin({ antDir: join(__dirname, '../../node_modules/antd'), varFile: antdVarFile, themeVariables: Object.keys(getLessVars(antdVarFile)), }) ]

return cfg }

3. Run `affected:build` with the `production` configuration

### Failure Logs
`color.less` is the file that is getting generated by the webpack-plugin:

ERROR in color.less color.less from Css Minimizer plugin /project/color.less:1788:1: Unknown word You tried to parse Less with the standard CSS parser; try again with the postcss-less parser [color.less:1788,1] You tried to parse Less with the standard CSS parser; try again with the postcss-less parser

### Environment
Node : 16.13.0
OS   : darwin x64
yarn : 1.22.15

nx : 13.1.3
@nrwl/angular : Not Found
@nrwl/cli : 13.1.3
@nrwl/cypress : 13.1.3
@nrwl/devkit : 13.1.3
@nrwl/eslint-plugin-nx : 13.1.3
@nrwl/express : Not Found
@nrwl/jest : 13.1.3
@nrwl/linter : 13.1.3
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/react : 13.1.3
@nrwl/schematics : Not Found
@nrwl/tao : 13.1.3
@nrwl/web : 13.1.3
@nrwl/workspace : 13.1.3
@nrwl/storybook : 13.1.3
@nrwl/gatsby : Not Found
typescript : 4.3.5

[petermanders89]

It seems to be related to the @nrwl/web. We are experiencing a similair issue. Leaving it on 12.x and our builds compile fine. We do not use less but sass instead.

[stuart-clark-45]

I am also getting this using sass and nx@13.8.3

[stuart-clark-45]

Ok so I found a weird solution to this (after a veeeery long time). The error was being thrown by a single module.scss file that was located in the shared assets of my repo. Eventually by deleting all the comments in the file I got it to work? So I guess the issue was related to the post-css stage in the webpack rules?

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[Jeff909Dev]

Ok so I found a weird solution to this (after a veeeery long time). The error was being thrown by a single module.scss file that was located in the shared assets of my repo. Eventually by deleting all the comments in the file I got it to work? So I guess the issue was related to the post-css stage in the webpack rules?

I had the same issue and I managed to solve it by adding manually the css minimizer plugin

const { join } = require('path');
const getWebpackConfig = require('@nrwl/react/plugins/webpack');
const { getLessVars } = require('antd-theme-generator');
const AntDesignThemePlugin = require('antd-theme-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

const antdVarFile = join(__dirname, './src/app/styles/theme.less');

module.exports = c => {
  const config = getWebpackConfig(c);

  config.optimization = {
    minimizer: [new CssMinimizerPlugin()]
  };

  config.plugins = [
    new AntDesignThemePlugin({
      varFile: antdVarFile,
      antDir: join(__dirname, '../../node_modules/antd'),
      themeVariables: Object.keys(getLessVars(antdVarFile))
    }),
    ...config.plugins
  ];
  return config;
};

Now builds works!

Hope it helps 😄

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.