How to Add React Three Fiber Rules to Eslint v9.0.0

By default, ESLint doesn’t have React Three Fiber rules and many errors will show in the section. One way you can remove these errors is to remove ESLint but this is not advisable since it helps prevent bugs and enforces coding standards.

Traditionally you could install the @react-three/eslint-plugin package and add a line of text to the .eslintrc.cjs file in the extends array.

The original way was to add the code to the .eslintrc.cjs file

module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:@react-three/recommended", <-------- Line Added
  ],
  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
  settings: { react: { version: "18.2" } },
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": "warn",
  },
};

However, this does not work with Eslint v9.0.0 since the .eslintrc.cjs file is now deprecated (source) and source.

Here are the steps to fix the false positive errors

1 Install the @react-three/eslint-plugin package

For Npm:
npm install @react-three/eslint-plugin --save-dev

For Yarn:
yarn add @react-three/eslint-plugin --save-dev

2 Update the plugins section of the eslint.config.js and add "@react-three": ReactThree, to the plugins section. I just put mine on the bottom.

export default [
  { ignores: ["dist"] },
  {
    files: ["**/*.{js,jsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: "latest",
        ecmaFeatures: { jsx: true },
        sourceType: "module",
      },
    },
    settings: { react: { version: "18.3" } },
    plugins: {
      react,
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
      "@react-three": ReactThree, <---------- Line Added
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...react.configs["jsx-runtime"].rules,
      ...reactHooks.configs.recommended.rules,
      "react/jsx-no-target-blank": "off",
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],
    },
  },
];

Special thanks to Aniket Chawla and his Iphone15Pro_landing/eslint.config.js file. It took me a while to figure out this issue but I solved it by finding his GitHub file.

Comments

[Damien G.]

Hi ! Thank you for this topic !
I have trouble. I follow the step but it's looks like that ESLint stop working... It's not showing error at all now haha. I also try to follow the github of Aniket... but same thing. Any idea ?