"Maximum call stack size exceeded" when running with eslnt 9

[musikele]

Bug report

Eslint version: 9.14
webpack@5.76.0
eslint-webpack-plugin@4.2.0

I am working on a legacy project, trying to upgrade some libraries; this is my attempt to upgrade eslint and eslint webpack plugin.

By using eslint 9, i am trying to use eslint flat config file. I know it's experimental support, so I decided to open a issue to maybe help stabilize the behaviour.

I am using CJS (require, module exports, etc.). It seems that ESLint uses ESM (import, export) internally.

My configuration is this:

new ESLintPlugin({
      configType: 'flat',
      eslintPath: 'eslint/use-at-your-own-risk',
      overrideConfigFile: true,
      overrideConfig: eslintConfig,
      formatter: require(
        rootDir + '/node_modules/eslint/lib/cli-engine/formatters/stylish'
      ),
    }),

• overrideConfigFile: if I put the path of the file directly, for example by using:

      overrideConfigFile: path.resolve(rootDir + '/eslint.config.js'),

I get:

ERROR in [eslint] A dynamic import callback was not specified.

Which may be caused by the fact that the project is using CJS modules and eslint at some point is importing a dynamic import. Which one? Error is unfortunately silenced. That's why I put it to true.

• overrideConfig: As a way to superate this error, I've decided to read the ESLint configuration by myself and pass it here as a JS object. This way I get: "Maximum call stack size exceeded".

• formatter: the stylish formatter is imported dynamically by eslint, and this was causing issues, that's why I added the formatter option and read the conf directly.

Actual Behavior

ERROR in [eslint] Maximum call stack size exceeded

webpack 5.76.0 compiled with 1 error in 285 ms
ℹ ｢wdm｣: Failed to compile.

Expected Behavior

I should get the list of warnings like i would by running npx eslint ..

How Do We Reproduce?

Here's a repo with a reproduction of the issue https://github.com/musikele/eslint-webpack-bug

in file config/webpack.common.js you can see the ESLintWebpackPlugin configuration.

To see the error run: npm run serve 

To see that linting is working you can use npm run lint or npx eslint . 

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 15.0.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 66.11 MB / 18.00 GB
  Binaries:
    Node: 20.13.1 - ~/.asdf/installs/nodejs/20.13.1/bin/node
    Yarn: 1.22.22 - ~/.asdf/installs/nodejs/20.13.1/bin/yarn
    npm: 10.9.0 - ~/.asdf/plugins/nodejs/shims/npm
  Packages:
    eslint-webpack-plugin: ^4.2.0 => 4.2.0 
    lodash-webpack-plugin: ^0.11.6 => 0.11.6 
    webpack: ^5.76.0 => 5.76.0 
    webpack-cli: ^4.7.0 => 4.7.0 
    webpack-dev-server: ^3.11.2 => 3.11.2 
    webpack-merge: ^5.7.3 => 5.7.3 

If i remove almost ALL plugins from the ESLint config file, it starts to work.

If I comment out ESLintWebpackPlugin, webpack works.

[alexander-akait]

If i remove almost ALL plugins from the ESLint config file, it starts to work.

It means the problem inside a plugin(s)

ERROR in [eslint] A dynamic import callback was not specified.

It happend when you can your code in https://nodejs.org/api/vm.html and don't provide importModuleDynamically for https://nodejs.org/api/vm.html#class-vmsourcetextmodule

[10hendersonm]

TL;DR eslint-webpack-plugin needs to either avoid or implement safe stringifying of circular JSON structures.

---

I dug into this regarding eslint-plugin-jest and discovered it's recursing in on itself forever because of self-referential ESLint plugin objects being converted to JSON within eslint-webpack-plugin:

https://github.com/webpack-contrib/eslint-webpack-plugin/blob/a653827eb27875d2fc06054311a29afc285ba476/src/getESLint.js#L118

I opened it as jest-community/eslint-plugin-jest#1724 originally and was informed that the recursive plugin structure is guidance directly provided by ESLint:

on the other eslint-plugin-jest's recursive plugin object is relatively dangerous.

This is how flat config works - plugins in configs are now the actual plugins, and since we're exporting a config we reference ourselves; our implementation mirrors what ESLint themselves tell you to do in their migration guide except they use Object.assign instead of the assignment operator: https://eslint.org/docs/latest/extend/plugin-migration-flat-config#migrating-configs-for-flat-config

The docs linked to:

This would yield a plugin structure that recurses down on itself if one were to attempt to travers it (like JSON.stringify does), which is currently used in eslint-webpack-plugin's caching strategy during getEslint(...): (see bottom of code block)

https://github.com/webpack-contrib/eslint-webpack-plugin/blob/a653827eb27875d2fc06054311a29afc285ba476/src/getESLint.js#L88-L119

---

I didn't look too closely into why JSON.stringify is being used, so with my low analysis I see 3 avenues:

1. Avoid stringifying the plugins
2. Use a library like flatted or the core util library (edit: answer was from 2013, util.inspect no longer works that way) which can safely handle circular JSON structures
3. Update the jsonStringifyReplacerSortKeys so it can safely handle recursive JSON

[alexander-akait]

@10hendersonm Do you want to send a PR, I am fine with any solution

[10hendersonm]

I started to but I believe I need to wait for my company's legal department to review and approve of me signing the contributor license agreement. I'm sorry, I hate to be the guy solutioning from the sidelines.

[alexander-akait]

@10hendersonm Don't worry, feel free to ping me when you will have ability to do it

[musikele]

waiting for the fix to be released, then :)

[ricardogobbosouza]

@musikele released v5.0.2