[BUGFIX] the issue infinite recursion by collect of resources from dependency modules by usage in react app some big components with many thousands dependencies

Author: webdiscus

CHANGELOG.md

@@ -1,7 +1,11 @@
+## 0.7.1 (Jan 14, 2021)
+### Bugfixes
+- The issue infinite recursion by collect of resources from dependency modules by usage in react app some big components with many thousands dependencies.
+
 ## 0.7.0 (Dec 21, 2020)
 ### Breaking change
 - The `silent` option is deprecated and will be removed on Juni 30, 2021. Use option `verbose: true` to show in console each removed empty file. Defaults, `verbose: false`.
- 
+
 ### Bugfixes
 - The issue `Maximum call stack size exceeded` was general fixed in all cases, for example, by usage the webpack setting `optimization.concatenateModules: true` and:
   - import react

index.js

@@ -11,9 +11,9 @@ const defaultOptions = {
     ignore: [],
 };
 
-// Save last dependency to compare it with dependency of next module
+// Save unique id in dependency object as marker of 'analysed module'
 // to avoid the infinite recursion by collect of resources.
-let lastDependency = '';
+let dependencyId = 1;
 
 class WebpackRemoveEmptyScriptsPlugin {
     constructor(options) {
@@ -91,8 +91,9 @@ class WebpackRemoveEmptyScriptsPlugin {
 }
 
 function collectEntryResources(compilation, module, cache) {
-    const moduleGraph = compilation.moduleGraph;
-    const index = moduleGraph.getPreOrderIndex(module),
+    const moduleGraph = compilation.moduleGraph,
+        index = moduleGraph.getPreOrderIndex(module),
+        propNameDependencyId = '__dependencyWebpackRemoveEmptyScriptsUniqueId',
         resources = [];
 
     // the index can be null
@@ -115,12 +116,19 @@ function collectEntryResources(compilation, module, cache) {
 
     if (module.dependencies) {
         module.dependencies.forEach(dependency => {
+
             let module = moduleGraph.getModule(dependency),
                 originModule = moduleGraph.getParentModule(dependency),
                 nextModule = module || originModule,
-                useNextModule = JSON.stringify(dependency) !== lastDependency;
+                useNextModule = false;
+
+            if (!dependency.hasOwnProperty(propNameDependencyId)) {
+                dependency[propNameDependencyId] = dependencyId++;
+                useNextModule = true;
+            }
 
-            lastDependency = JSON.stringify(dependency);
+            // debug info
+            //console.log('::: module ::: ', useNextModule ? '' : '-----', dependency[propNameDependencyId]);
 
             if (nextModule && useNextModule) {
                 const dependencyResources = collectEntryResources(compilation, nextModule, cache);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-remove-empty-scripts",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Webpack 5 plugin to remove empty scripts generated by usage only style in entries. This is the fork of original plugin https://github.com/fqborges/webpack-fix-style-only-entries (ver. 0.6.0).",
   "main": "index.js",
   "files": [
@@ -34,13 +34,13 @@
     "css-loader": "^5.0.1",
     "fs": "^0.0.1-security",
     "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^1.3.3",
+    "mini-css-extract-plugin": "^1.3.4",
     "moment": "^2.29.1",
     "rimraf": "^3.0.2",
-    "terser-webpack-plugin": "^5.0.3",
-    "webpack": "^5.11.0",
+    "terser-webpack-plugin": "^5.1.1",
+    "webpack": "^5.14.0",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^5.7.2"
+    "webpack-merge": "^5.7.4"
   },
   "bugs": {
     "url": "https://github.com/webdiscus/webpack-remove-empty-scripts/issues"

test/issue-webpack-concatenateModules/README.md

@@ -14,7 +14,7 @@ where not exist a `name` or a `require`:
 
 If occur like it structure, then not analyse for a resource, skip it.
 
-### Manual test (issure is fixed)
+### Manual test (issue is fixed)
 
 Initial, run `npm install` to install dependencies.
 

test/issue-webpack-react-components/.babelrc.json

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+  ]
+}

test/issue-webpack-react-components/README.md

@@ -0,0 +1,17 @@
+# Fix the issue by concatenateModules = true in react application
+
+Some big react components, such as `@material-ui/data-grid` from `material-ui.com` has more thousands dependencies (over 4000).
+In any combination of imports from same components come out the issue: _infinite recursion by collect of resources from dependency modules_.
+
+### Manual test (issue is fixed)
+
+Initial, run `npm install` to install dependencies.
+
+Build in production mode with webpack config `optimization.concatenateModules: true`
+
+run `./webpack-build.sh`
+
+
+Build in development mode with webpack config `optimization.concatenateModules: true`
+
+run `./webpack-build-dev.sh`