How to configure with `eslint.config.js` with ESM?

[rakleed]

Can you please add information in the README on how to set up the plugin and config when using flat config in ESLint (eslint.config.js) with ESM?

[ljharb]

PRs are welcome, but i don’t use flat config yet.

[rdebeasi]

My understanding is that eslint-plugin-react isn't yet compatible with the new flat config format: #3688

Correction: the new format is already supported!

[ljharb]

Indeed, but eslint has FlatCompat for that.

[rdebeasi]

Ah cool! So could this issue could be resolved by docs explaining how to use FlatCompat with eslint-plugin-react?

[ljharb]

That would be a fine interim solution, yes - altho we'd just link to eslint's explanation, we don't need any prose here.

[rdebeasi]

I realized that the Configuration (new: eslint.config.js) section in the readme covers setup with flat files.

@rakleed, are you looking for a version of this documentation that uses ESM instead of CommonJS? Or is this documentation missing some other information that you need?

[rakleed]

@rakleed, are you looking for a version of this documentation that uses ESM instead of CommonJS?

Yes, exactly.

[rdebeasi]

Ah, thanks for clearing that up! An ESM version of that documentation would replace require and module.exports with import and export default, like this:

import reactRecommended from 'eslint-plugin-react/configs/recommended';

export default [
  …
  reactRecommended, // This is not a plugin object, but a shareable config object
  …
];

A readme a with two versions of each example would be helpful for folks who are using ESM, but it could be difficult to read and maintain. Perhaps the readme could include a single ESM example, or a link to more details about the difference between ESM and CommonJS?

[ljharb]

I think that if translating the basic CJS example to ESM in your head requires documentation, then using native ESM is probably a bit premature.

[rakleed]

@rdebeasi thanks, this works for most cases, although you need to add the .js extension, which is strange since all other configs with ESLint Flat Config support do not have such a requirement.

But in my case it doesn't work. I'm using the Airbnb config for React, which doesn't support Flat Config, so I use the FlatCompat utility. But when I then add reactJsxRuntime, the console displays the error Error: Key "plugins": Cannot redefine plugin "react".

Here is my example:

import reactJsxRuntime from 'eslint-plugin-react/configs/jsx-runtime.js';

export default [
  …
  ...compat.extends('airbnb', 'airbnb/hooks'),
  reactJsxRuntime,
  …
];

[rdebeasi]

Oh interesting! That sounds like a different problem from what's described in this issue. If you no longer need the readme update, consider closing this issue.

If you'd like to dig into that issue further, you could:

• Try the same thing with .eslintrc to determine whether this issue occurs only when using flat files
• Create a minimal, reproducible example of the problem
• File a new ticket with that example and steps to reproduce

Caveat: I'm not associated with the eslint-pluign-react project and I don't know much about this codebase. These are just some general troubleshooting steps that I use! 😄