How do I use eslint-plugin-react-compiler with eslint 9?

[nojaf]

Hello,

I have never used eslint before and I would like to give eslint-plugin-react-compiler a shot.

The ESlint docs do not mention an .eslintrc file like the React readme says.

I'm quite confused how to configure this.
Would this be a correct eslint.config.js file?

import reactCompilerPlugin from 'eslint-plugin-react-compiler';

export default [
    {
        plugins: {
            "react-compiler": reactCompilerPlugin
        },
        rules: {
            "react-compiler/react-compiler": "error",
        },
        files: ["**/*.res.mjs"]
    }];

What other dependencies do I btw need to make this work for React 18?

Thanks in advance!

[guillaumebrunerie]

Hello,

I have never used eslint before and I would like to give eslint-plugin-react-compiler a shot.

The ESlint docs do not mention an .eslintrc file like the React readme says.

The ESLint ecosystem is currently transitioning from legacy config files (.eslintrc) to "flat config" files (eslint.config.js). It seems like this plugin's docs haven’t been updated to explain how to use it with a flat config.

I'm quite confused how to configure this. Would this be a correct eslint.config.js file?

import reactCompilerPlugin from 'eslint-plugin-react-compiler';

export default [
    {
        plugins: {
            "react-compiler": reactCompilerPlugin
        },
        rules: {
            "react-compiler/react-compiler": "error",
        },
        files: ["**/*.res.mjs"]
    }];

Yes, except that your files field will only apply this rule to files named *.res.mjs, which seems overly restrictive. It works for me to simply remove the files field:

import reactCompilerPlugin from 'eslint-plugin-react-compiler';

export default [
  /* [...] default configs and settings */
  {
    plugins: {
      "react-compiler": reactCompilerPlugin,
    },
    rules: {
      "react-compiler/react-compiler": "warn",
    },
  },
  { // The rest of my config
    files: ["**/*.{j,t}s{,x}"],
    rules: {
      /* [...] */
    }
  },
  {
    ignores: [ /* global ignores */ ],
  },
];

What other dependencies do I btw need to make this work for React 18?

Not sure if you need any other dependencies, it works for me on React 18 after installing only eslint-plugin-react-compiler (but I had ESLint setup already before).

[nojaf]

I'm using ReScript (which explains the *.res.js extension).
The compiled ReScript was using var instead of let and that did not trigger the linter.
Thus it appeared as nothing was happening. The config was indeed correct.
Thanks for your response, much appreciated!

[fibonacid]

I tried your config in a Vite project and it doesn't work.
Could it be because package json has type module?

Oops! Something went wrong! :(

ESLint: 9.12.0

SyntaxError: Identifier 'js' has already been declared
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:169:18)
    at callTranslator (node:internal/modules/esm/loader:272:14)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:278:30)
    at async link (node:internal/modules/esm/module_job:78:21)

[michaelfaith]

@fibonacid unlikely