antd-theme-generator icon indicating copy to clipboard operation
antd-theme-generator copied to clipboard

Memo crashing in less hot update

Open Ellathet opened this issue 2 years ago • 0 comments

BUG:

  • When hot update has maked and change any propy on less, the compilation of less or antd-theme-generator, idk, crashing my app, a try seting node memo to 8gb, and works, but the app got more slower, and crash sometimes when compilation.
  • I got this warning below:
Compiling...
error RangeError: Maximum call stack size exceeded
    at Ruleset.eval (C:\Users\Rafael\Documents\Projetos\LMS\lms_web\node_modules\antd-theme-generator\node_modules\less\lib\less\tree\ruleset.js:161:28)
    at Definition.evalCall (C:\Users\Rafael\Documents\Projetos\LMS\lms_web\node_modules\antd-theme-generator\node_modules\less\lib\less\tree\mixin-definition.js:158:23)
    at MixinCall.eval (C:\Users\Rafael\Documents\Projetos\LMS\lms_web\node_modules\antd-theme-generator\node_modules\less\lib\less\tree\mixin-call.js:138:46)
    at Ruleset.eval (C:\Users\Rafael\Documents\Projetos\LMS\lms_web\node_modules\antd-theme-generator\node_modules\less\lib\less\tree\ruleset.js:151:26)
    at Definition.evalCall (C:\Users\Rafael\Documents\Projetos\LMS\lms_web\node_modules\antd-theme-generator\node_modules\less\lib\less\tree\mixin-definition.js:158:23)
Compiled with warnings.

This is my config-overrides.js:

const { override, fixBabelImports, addLessLoader, addWebpackPlugin } = require('customize-cra');
const path = require('path');
const fixTerser = (config) => {
  config.optimization.minimizer.forEach(minimizer => {
    if (minimizer && minimizer.options && minimizer.options.parallel) {
      minimizer.options.parallel = 0;
    }
  });

  return config;
};

const AntDesignThemePlugin = require('antd-theme-webpack-plugin');

module.exports = override(
  fixTerser,
  fixBabelImports(
    'import',
    {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true,
    },
  ),
  addWebpackPlugin(new AntDesignThemePlugin({
    stylesDir: path.join(__dirname, './src/'),
    antDir: path.join(__dirname, './node_modules/antd'),
    varFile: path.join(__dirname, './src/styles/less/_parameters.less'),
    themeVariables: [
      '@primary-color',
      '@primary-color-dark',
      '@secondary-color',
      '@label-spacing',
      '@label-spacing-select',
      '@light-gray',
      '@dark-gray',
      '@gray',
      '@red',
      '@primary-color-gradient',
    ],
    generateOnce: false,
  })),
  addLessLoader(
    {
      javascriptEnabled: true,
      modifyVars: {
        '@primary-color': `${process.env.REACT_APP_COLOR_PRIMARY || '#46569e'}`,
        '@primary-color-dark': 'darken(@primary-color, 10%)',
        '@secondary-color': 'darken(@primary-color, 20%)',
        '@label-spacing': '5px',
        '@label-spacing-select': '15px',
        '@light-gray': '#eeeeee',
        '@dark-gray': '#6a6a6a',
        '@gray': '#c1c1c1',
        '@red': '#f5222d',
        '@selected-home': `${process.env.REACT_APP_HOME_COMPONENT || 'HomeLongevidade'}`
      },
    },
  ),
);

Folder structure: image

  • Inside index.less I'm import all styles of components.

Versions

  • node v12.22.1
  • antd v^4.2.0
  • antd-theme-gen v1.2.10

Ellathet avatar Jun 03 '22 13:06 Ellathet