JavaScript heap out of memory when modify less file

Benjaminbai commented 3 years ago

Describe the bug Describe your bug in English language

Show your code Show your config-overrides.js file and styles folder structure

Screenshots If applicable, add screenshots to help explain your problem.

Version Which version is installed in your application? Try using the latest version, that may help

kongyijilafumi commented 3 years ago

use the create-react-app create project. edit config/webpack.config.jsas follows :

// .......
const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const options = {
  antDir: path.join(paths.appPath, "./node_modules/antd"),
  stylesDir: path.join(paths.appPath, "./src"),
  varFile: path.join(paths.appPath, "./src/assets/theme/var.less"), // default path is Ant Design default.less file
  themeVariables: [
    "@primary-color",
    "@link-color",
    "@success-color",
    "@warning-color",
    "@error-color",
    "@layout-text",
    "@layout-background",
    "@heading-color",
    "@text-color",
    "@text-color-secondary",
    "@disabled-color",
    "@border-color-base",
  ],
  indexFileName: "index.html",
  generateOnce: false,
};

const themePlugin = new AntDesignThemePlugin(options);
// ..................

module.exports = function (webpackEnv) {
// .............................
  return {
    mode: isEnvProduction ? "production" : isEnvDevelopment && "development",
    //.................
    plugins:[
      themePlugin,
      new HtmlWebpackPlugin(....),
      // ...........
    ]
  }
}

then,use the command node script/start run the project.Find everything in normal operation but,when I edit src/....less ,This will happen

TomasTarasovic commented 3 years ago

I had the same issue.

PingZaiDotTse commented 3 years ago

+1

Ginxo commented 3 years ago

same issue here

ekiliqua commented 3 years ago

+1

SinHide commented 3 years ago

+1

pouyio commented 3 years ago

+1

ito-master commented 3 years ago

+1

tsiotska commented 3 years ago

+1!

Nice-yang commented 3 years ago

+1

mzohaibqc commented 3 years ago

@Benjaminbai @kongyijilafumi @Nice-yang @tsiotska @ekiliqua @Ginxo @PingZai-Tse @TomasTarasovic Can any one of you setup a public repository and reproduce this bug. I'll fix that. Currently, above mentioned information is not enough. This issue contains no information about CRA version, ANTD version, nothing.

tsiotska commented 3 years ago

@Benjaminbai @kongyijilafumi @Nice-yang @tsiotska @ekiliqua @Ginxo @PingZai-Tse @TomasTarasovic Can any one of you setup a public repository and reproduce this bug. I'll fix that. Currently, above mentioned information is not enough. This issue contains no information about CRA version, ANTD version, nothing.

I can say that i used Vue 3, Antdv2.x (2.2.2) and this issue is caused by hot-reload (dead on when editing theme variables)

kongyijilafumi commented 3 years ago

@Benjaminbai @kongyijilafumi @Nice-yang @tsiotska @ekiliqua @Ginxo @PingZai-Tse @TomasTarasovic Can any one of you setup a public repository and reproduce this bug. I'll fix that. Currently, above mentioned information is not enough. This issue contains no information about CRA version, ANTD version, nothing.

I create the demo,link

amirrstm commented 2 years ago

@mzohaibqc I have the same issue here. There is a function named combineLess in antd-theme-generator that gets filePath as an argument. I figured out that each line in recursive map is falling in an infinite loop and It causes Maximum call stack size exceeded.

mzohaibqc commented 2 years ago

@kongyijilafumi I cloned and run your project. it worked well, no such memory issue found.

mzohaibqc commented 2 years ago

@amirrstm Can you reproduce this and share?

J-Cat commented 2 years ago

I also have this exact same issue using antd 4.2, and CRA5/webpack5, with craco.

antd@4.20.3
antd-theme-webpack-plugin@1.3.9
craco-less@2.0.0
@craco/craco@6.4.3
less@4.1.2
webpack@5.72.1
react-scripts@5.0.1

anuragsachdeva28 commented 2 years ago

Did anyone find a solution to this? I am facing the same issue. I won't be able to provide a replicable scenario, but I will try my best to explain my scenario and the things I debugged. Initially, my project started with the node version of v8.5.0. At that time, the version of 'antd-theme-webpack-plugin' was v1.1.8. We recently had to upgrade the node version to v14.16.1. When we did this, a lot of CSS changes got distorted. For example, CSS variables color import did not function properly. Then I updated, 'antd-theme-webpack-plugin' to the most compatible version v1.3.9. Whenever I make changes in less file, I get the above stack trace issue. antd-version: 3.x

mzohaibqc / antd-theme-webpack-plugin

JavaScript heap out of memory when modify less file #87