[BUGFIX] fix error - Maximum call stack size exceeded.

Author: webdiscus

.gitignore

@@ -1,3 +1,4 @@
 .idea
+build
 node_modules
 test/outputs

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.6.4 (Dec 19, 2020)
+- Bugfix the error: `Maximum call stack size exceeded` with webpack setting `optimization.concatenateModules: true`and usage in script imports from `react` and `redux`. 
+- Add test case for single style without a scripts in webpack config.
+- Add silent mode in tests to suppress output log info in the console.
+- The option `ignore` can be the array of string or RegExp. Add default value of `ignore` as `['/node_modules/']` to ignore resources from `node_modules` path. 
+- Update npm packages.
+
 ## 0.6.3 (Oct 25, 2020)
 Fix BREAKING CHANGE in Webpack 5: No more changes should happen to `Compilation.assets`. Update code accord new API.
 

README.md

@@ -1,39 +1,39 @@
-[![npm version](https://badge.fury.io/js/webpack-fix-style-only-entries.svg)](https://www.npmjs.com/package/webpack-fix-style-only-entries)
+[![npm version](https://badge.fury.io/js/webpack-remove-empty-scripts.svg)](https://www.npmjs.com/package/webpack-remove-empty-scripts)
 
-# [webpack-fix-style-only-entries](https://www.npmjs.com/package/webpack-fix-style-only-entries)
+# [webpack-remove-empty-scripts](https://www.npmjs.com/package/webpack-remove-empty-scripts)
 
-This is a small plugin developed to solve the problem of having a style only entry (css/sass/less/stylus) generating an extra js file.
+
+The plugin remove empty scripts generated by usage only a style (css/scss/sass/less/stylus) without a js script in entry.
 
 You can find more info by reading the following issues:
 
  - https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/518
  - https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151
 
-View on: [Github](https://github.com/fqborges/webpack-fix-style-only-entries) - [npm](https://www.npmjs.com/package/webpack-fix-style-only-entries)
+This is a fork of original plugin https://github.com/fqborges/webpack-fix-style-only-entries (ver. 0.6.0).
+In this fork fixed some deprecation messages and integration tests for Webpack 5. See the details in [changelog](https://github.com/webdiscus/webpack-remove-empty-scripts/blob/master/CHANGELOG.md#061-oct-20-2020).
+
+The plugin support only **Webpack 5** using new ChunkGraph and ModuleGraph APIs.
+For **Webpack 4** use original [plugin](https://github.com/fqborges/webpack-fix-style-only-entries). 
 
-## How it works
-It just find js files from chunks of css only entries and remove the js file from the compilation.
+View on: [GitHub](https://github.com/webdiscus/webpack-remove-empty-scripts), [npmjs](https://www.npmjs.com/package/webpack-remove-empty-scripts)
 
 ## How to use
-install using your package manager of choice:
- - npm: `npm install -D webpack-fix-style-only-entries`
- - yarn: `yarn add -D webpack-fix-style-only-entries`
+Install `npm install -D webpack-remove-empty-scripts`.
 
 Require and add to webpack.config plugins.
 
-Warning: this plugin does not load styles or split your bundles, it just fix chunks of css only entries by removing the (almost) empty js file.
-
 ```javascript
-// ... other plugins
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
 
 module.exports = {
     entry: {
-        "main" : "./app/main.js"
-        "styles": ["./common/styles.css", "./app/styles.css"]
+        'main' : './app/main.js',
+        'styles': ['./common/styles.css', './app/styles.css']
     },
     module: {
+        rules: [
             {
                 test: /\.css$/,
                 use: [
@@ -44,30 +44,37 @@ module.exports = {
         ]
     },
     plugins: [
-        new FixStyleOnlyEntriesPlugin(),
+        new RemoveEmptyScriptsPlugin(),
         new MiniCssExtractPlugin({
-            filename: "[name].[chunkhash:8].css",
+            filename: '[name].[chunkhash:8].css',
         }),
     ],
 };
 ```
 
 ## Options
 
-| Name       | Type             | Default                                | Description |
-|------------|---------------   |----------------------------------------|-------------|
-| extensions | Array[string]    | ["less", "scss", "css", "styl","sass"] | file extensions for styles      |
-| silent     | boolean          | false                                  | supress logs to console         |
-| ignore     | string or RegExp | undefined                              | match resource to be ignored    |
+| Name       | Type             | Default                                 | Description |
+|------------|------------------|-----------------------------------------|-------------|
+| silent     | boolean          | false                                   | supress logs to console         |
+| extensions | Array[string]    | ['css', 'scss', 'sass', 'less', 'styl'] | file extensions for styles      |
+| ignore     | string or RegExp or Array[string] or Array[RegExp] | ['/node_modules/'] | match resource path to be ignored, defaults the resources from `node_modules` are ignored|
 
 ### Example config:
-    // to identify only 'foo' and 'bar' extensions as styles
-    new FixStyleOnlyEntriesPlugin({ extensions:['foo', 'bar'] }),
+```JavaScript
+// supress logs to console, use it for production
+new RemoveEmptyScriptsPlugin({ silent: true })
+```
+
+```JavaScript
+// to identify only 'foo' and 'bar' extensions as styles
+new RemoveEmptyScriptsPlugin({ extensions:['foo', 'bar'] })
+```
 
 ## Recipes
 
 ### I use a javascript entry to styles:
-Give an especial extension to your file (`.css.js` for example) and configure `new FixStyleOnlyEntriesPlugin({ extensions:['css.js'] })`. See: https://github.com/fqborges/webpack-fix-style-only-entries/issues/8.
+Give an especial extension to your file (`.css.js` for example) and configure `new RemoveEmptyScriptsPlugin({ extensions:['css.js'] })`.
 
 ### I use webpack-hot-middleware:
-Configure this plugin as `new FixStyleOnlyEntriesPlugin({ ignore: 'webpack-hot-middleware' })`. See: https://github.com/fqborges/webpack-fix-style-only-entries/issues/12 and https://github.com/fqborges/webpack-fix-style-only-entries/blob/master/test/cases/css-entry-with-ignored-hmr/webpack.config.js.
+Configure this plugin as `new RemoveEmptyScriptsPlugin({ ignore: 'webpack-hot-middleware' })`. See: https://github.com/webdiscus/webpack-remove-empty-scripts/blob/master/test/cases/css-entry-with-ignored-hmr/webpack.config.js

index.js

@@ -5,117 +5,141 @@
 const NAME = 'webpack-remove-empty-scripts';
 
 const defaultOptions = {
-  extensions: ['css', 'scss', 'sass', 'less', 'styl'],
-  scriptExtensions: ['js', 'mjs'],
-  silent: false,
-  ignore: undefined,
+    extensions: ['css', 'scss', 'sass', 'less', 'styl'],
+    scriptExtensions: ['js', 'mjs'],
+    silent: false,
+    ignore: [
+        '/node_modules/'
+    ],
 };
 
 class WebpackRemoveEmptyScriptsPlugin {
-  constructor(options) {
-    this.apply = this.apply.bind(this);
-    this.options = Object.assign({}, defaultOptions, options);
-  }
-
-  apply(compiler) {
-    const extensionsWithoutDots = this.options.extensions.map(e =>
-        e[0] === '.' ? e.substring(1) : e
-    );
-
-    const patternOneOfExtensions = extensionsWithoutDots
-        .map(ext => escapeRegExp(ext))
-        .join('|');
-
-    const reStylesResource = new RegExp(
-        `[.](${patternOneOfExtensions})([?].*)?$`
-    );
-
-    compiler.hooks.compilation.tap(NAME, compilation => {
-      const resourcesCache = [];
-
-      compilation.hooks.chunkAsset.tap(NAME, (chunk, file) => {
-        const isNotScript = defaultOptions.scriptExtensions.every((ext) => file.lastIndexOf('.' + ext) < 0);
-        if (isNotScript) return;
-
-        // has entry modules
-        if (compilation.chunkGraph.getNumberOfEntryModules(chunk) < 1) return;
-        const entryModules = Array.from(compilation.chunkGraph.getChunkEntryModulesIterable(chunk));
-        if (entryModules.length < 1) return;
-
-        const entryModule = entryModules[0];
-        const entryResources = collectEntryResources(compilation, entryModule, resourcesCache);
-
-        const resources = this.options.ignore
-            ? entryResources.filter(res => !res.match(this.options.ignore))
-            : entryResources;
-
-        const isStyleOnly =
-            resources.length &&
-            resources.every(resource => reStylesResource.test(resource));
-
-        if (isStyleOnly) {
-          if (!this.options.silent) {
-            console.log('[remove-empty-scripts] remove empty js from style only entry: ' + file);
-          }
-          
-          chunk.files.delete(file);
-          compilation.deleteAsset(file);
+    constructor(options) {
+        this.apply = this.apply.bind(this);
+        this.options = Object.assign({}, defaultOptions, options);
+        this.options.ignore = defaultOptions.ignore;
+
+        // default ignore resource plus customer ignores
+        if (options && options.hasOwnProperty('ignore')) {
+            let optionIgnore = Array.isArray(options.ignore)
+                ? options.ignore
+                : [options.ignore];
+
+            this.options.ignore = this.options.ignore.concat(optionIgnore);
         }
-      });
-    });
-  }
-}
+    }
 
-function collectEntryResources(compilation, module, cache) {
-  const index = compilation.moduleGraph.getPreOrderIndex(module),
-      resources = [];
+    apply(compiler) {
+        const customIgnore = this.options.ignore;
 
-  // index of module is unique per compilation
-  // module.id can be null, not used here
-  if (cache[index] !== undefined) {
+        const extensionsWithoutDots = this.options.extensions.map(e =>
+            e[0] === '.' ? e.substring(1) : e
+        );
 
-    return cache[index];
-  }
+        const patternOneOfExtensions = extensionsWithoutDots
+            .map(ext => escapeRegExp(ext))
+            .join('|');
 
-  if (typeof module.resource == 'string') {
-    const resources = [module.resource];
-    cache[index] = resources;
+        const reStylesResource = new RegExp(
+            `[.](${patternOneOfExtensions})([?].*)?$`
+        );
 
-    return resources;
-  }
+        compiler.hooks.compilation.tap(NAME, compilation => {
+            const resourcesCache = [];
 
-  if (module.dependencies) {
-    module.dependencies.forEach(dep => {
-      if(dep) {
-        const module = compilation.moduleGraph.getModule(dep),
-            originModule = compilation.moduleGraph.getParentModule(dep),
-            nextModule = module || originModule;
+            compilation.hooks.chunkAsset.tap(NAME, (chunk, file) => {
+                const isNotScript = defaultOptions.scriptExtensions.every((ext) => file.lastIndexOf('.' + ext) < 0);
+                if (isNotScript) return;
 
-        if (nextModule) {
-          const depResources = collectEntryResources(compilation, nextModule, cache);
+                // has entry modules
+                if (compilation.chunkGraph.getNumberOfEntryModules(chunk) < 1) return;
+                const entryModules = Array.from(compilation.chunkGraph.getChunkEntryModulesIterable(chunk));
+                if (entryModules.length < 1) return;
 
-          for (let index = 0, length = depResources.length; index !== length; index++) {
-            resources.push(depResources[index]);
-          }
-        }
-      }
-    });
-  }
-  cache[index] = resources;
+                const entryModule = entryModules[0];
+                const entryResources = collectEntryResources(compilation, entryModule, resourcesCache);
+
+                const resources = customIgnore.length > 0
+                    ? entryResources.filter(res => customIgnore.every(ignore => !res.match(ignore)))
+                    : entryResources;
+
+                const isStyleOnly =
+                    resources.length &&
+                    resources.every(resource => reStylesResource.test(resource));
 
-  return resources;
+                if (isStyleOnly) {
+                    if (!this.options.silent) {
+                        console.log('[remove-empty-scripts] remove empty js from style only entry: ' + file);
+                    }
+
+                    chunk.files.delete(file);
+                    compilation.deleteAsset(file);
+                }
+            });
+        });
+    }
+}
+
+function collectEntryResources(compilation, module, cache) {
+    const index = compilation.moduleGraph.getPreOrderIndex(module),
+        resources = [];
+
+    // the index can be null
+    if (index == null) {
+        return resources;
+    }
+
+    // index of module is unique per compilation
+    // module.id can be null, not used here
+    if (cache[index] !== undefined) {
+        return cache[index];
+    }
+
+    if (typeof module.resource === 'string') {
+        const resources = [module.resource];
+        cache[index] = resources;
+
+        return resources;
+    }
+
+    if (module.dependencies) {
+        module.dependencies.forEach(dep => {
+            if (dep) {
+                const module = compilation.moduleGraph.getModule(dep),
+                    originModule = compilation.moduleGraph.getParentModule(dep),
+                    nextModule = module || originModule;
+
+                if (nextModule && (!dep.hasOwnProperty('decorator') || dep['decorator'].indexOf('__webpack_require__') < 0)) {
+                    const depResources = collectEntryResources(compilation, nextModule, cache);
+
+                    for (let i = 0, length = depResources.length; i !== length; i++) {
+                        let depFile = depResources[i];
+                        if (resources.indexOf(depFile) < 0) {
+                          resources.push(depFile);
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    if (resources.length > 0) {
+        cache[index] = resources;
+    }
+
+    return resources;
 }
 
 // https://github.com/lodash/lodash/blob/4.17.11/lodash.js#L14274
 const reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
 const reHasRegExpChar = RegExp(reRegExpChar.source);
 
 function escapeRegExp(string) {
-  string = String(string);
+    string = String(string);
 
-  return string && reHasRegExpChar.test(string)
-      ? string.replace(reRegExpChar, '\\$&')
-      : string;
+    return string && reHasRegExpChar.test(string)
+        ? string.replace(reRegExpChar, '\\$&')
+        : string;
 }
 
 module.exports = WebpackRemoveEmptyScriptsPlugin;