Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to configure with eslint.config.js with ESM? #3685

Closed
rakleed opened this issue Feb 2, 2024 · 16 comments
Closed

How to configure with eslint.config.js with ESM? #3685

rakleed opened this issue Feb 2, 2024 · 16 comments

Comments

@rakleed
Copy link

rakleed commented Feb 2, 2024

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
Copy link
Member

ljharb commented Feb 2, 2024

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

@rdebeasi
Copy link

rdebeasi commented Feb 8, 2024

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
Copy link
Member

ljharb commented Feb 8, 2024

Indeed, but eslint has FlatCompat for that.

@rdebeasi
Copy link

rdebeasi commented Feb 8, 2024

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

@ljharb
Copy link
Member

ljharb commented Feb 8, 2024

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
Copy link

rdebeasi commented Feb 9, 2024

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
Copy link
Author

rakleed commented Feb 9, 2024

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

Yes, exactly.

@rdebeasi
Copy link

rdebeasi commented Feb 9, 2024

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
Copy link
Member

ljharb commented Feb 9, 2024

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
Copy link
Author

rakleed commented Feb 13, 2024

@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
Copy link

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! 😄

@GerroDen
Copy link

Am I missing something? I see in docs there are flat configs exported. But I cannot find the flat configs that in the actual code.

@ljharb
Copy link
Member

ljharb commented Jul 18, 2024

@GerroDen be sure you're looking at the docs for the last released tag on github - everywhere on github, things on main might be unreleased.

@magne4000
Copy link

magne4000 commented Jul 22, 2024

The plugin lacks exports definitions in package.json, which is why we see errors with some Typescript or ESM configs.
Example of what it looks like in eslint-plugin-prettier.

@ljharb
Copy link
Member

ljharb commented Jul 22, 2024

@magne4000 since adding exports is a breaking change, it can't be added within v7. Separately, there shouldn't be any need for exports definitions - without them, everything is accessible. If you mean that native ESM requires specifying file extensions, that's sadly true, and exports would indeed be able to omit them.

@ljharb
Copy link
Member

ljharb commented Jul 22, 2024

The latest version (v7.35.0) supports eslint 9 and flat config.

Please file a new issue if you're having trouble with that version.

@ljharb ljharb closed this as completed Jul 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

5 participants