Support "Flat Config" (ESLint 9)

[JoshuaKGoldberg]

👋 Coming over from eslint/eslint#18093: ESLint is migrating to a new "flat config" format that will be the default in ESLint v9.

It doesn't look like eslint-plugin-react-native has support yet. I'm posting this issue here as a reference & cross-linking it to the table in eslint/eslint#18093. If there's anything technical blocking the extension from supporting flat configs, please let us know - we'd be happy to try to help! 💜

Additional resources:

• Configuration Migration Guide
• (edit) Plugin Migration Guide
• Blog posts on the new config system: Part 1: Background, Part 2: Introduction to flat config

[Miguel-A-Jara]

If anyone is trying to use this with eslint's flat config. You can use the fixupPluginRules from @eslint/compat.
https://www.npmjs.com/package/@eslint/compat

import { fixupPluginRules } from '@eslint/compat'
import reactNative from 'eslint-plugin-react-native'

export default [
  // ...
  {
    plugins: {
      'react-native': fixupPluginRules(reactNative)
    }
  }
]

[generosocarbone]

@Miguel-A-Jara I got the following:

$ eslint .

Oops! Something went wrong! :(

ESLint: 9.12.0

ConfigError: Config (unnamed): Key "plugins": Cannot redefine plugin "react-native".
    at rethrowConfigError (/Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/@eslint/config-array/dist/cjs/index.cjs:303:8)
    at /Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/@eslint/config-array/dist/cjs/index.cjs:1098:5
    at Array.reduce (<anonymous>)
    at FlatConfigArray.getConfigWithStatus (/Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/@eslint/config-array/dist/cjs/index.cjs:1091:43)
    at FlatConfigArray.getConfig (/Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/@eslint/config-array/dist/cjs/index.cjs:1120:15)
    at entryFilter (/Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/eslint/lib/eslint/eslint-helpers.js:286:40)
    at async NodeHfs.<anonymous> (file:///Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/@humanfs/core/src/hfs.js:560:24)
    at async NodeHfs.walk (file:///Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/@humanfs/core/src/hfs.js:600:3)
    at async globSearch (/Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/eslint/lib/eslint/eslint-helpers.js:327:26)
    at async Promise.allSettled (index 0)
error Command failed with exit code 2.

[srtp]

@Miguel-A-Jara I got the following:

$ eslint .

Oops! Something went wrong! :(

ESLint: 9.12.0

ConfigError: Config (unnamed): Key "plugins": Cannot redefine plugin "react-native".
    at rethrowConfigError (/Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/@eslint/config-array/dist/cjs/index.cjs:303:8)
    at /Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/@eslint/config-array/dist/cjs/index.cjs:1098:5
    at Array.reduce (<anonymous>)
    at FlatConfigArray.getConfigWithStatus (/Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/@eslint/config-array/dist/cjs/index.cjs:1091:43)
    at FlatConfigArray.getConfig (/Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/@eslint/config-array/dist/cjs/index.cjs:1120:15)
    at entryFilter (/Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/eslint/lib/eslint/eslint-helpers.js:286:40)
    at async NodeHfs.<anonymous> (file:///Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/@humanfs/core/src/hfs.js:560:24)
    at async NodeHfs.walk (file:///Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/@humanfs/core/src/hfs.js:600:3)
    at async globSearch (/Users/generosocarbone/syscake-dev/techser/snap-mobile/node_modules/eslint/lib/eslint/eslint-helpers.js:327:26)
    at async Promise.allSettled (index 0)
error Command failed with exit code 2.

How to fix ??

[caralin3]

Any updates as to when eslint-plugin-react-native will support ESLint v9?

[flexbox]

@generosocarbone @srtp

yarn add @eslint/compat --dev

and then follow this guide
https://www.npmjs.com/package/@eslint/compat

here is my config if you are looking for inspiration

const { defineConfig } = require("eslint/config");
const expoConfig = require("eslint-config-expo/flat");
const eslintPluginPrettierRecommended = require("eslint-plugin-prettier/recommended");
const { fixupPluginRules } = require("@eslint/compat");
const reactNative = require('eslint-plugin-react-native');

module.exports = defineConfig([
  expoConfig,
  eslintPluginPrettierRecommended,
  {
    ignores: ["dist/*"],
    plugins: {
      'react-native': fixupPluginRules(reactNative)
    },
    rules: {
      "prettier/prettier": [
        "error",
        {
          printWidth: 100,
          tabWidth: 2,
          singleQuote: false,
          bracketSameLine: true,
        },
      ],
      // Disallow console.log statements
      "no-console": ["error"],
      // React Native specific rules
      "react-native/no-color-literals": 2,
      "react-native/no-unused-styles": 2,
      "react-native/no-raw-text": 2,
      "react-native/sort-styles": 2,
    },
  },
]);

[SGarcia710]

@generosocarbone @srtp

yarn add @eslint/compat --dev

and then follow this guide https://www.npmjs.com/package/@eslint/compat

here is my config if you are looking for inspiration

const { defineConfig } = require("eslint/config");
const expoConfig = require("eslint-config-expo/flat");
const eslintPluginPrettierRecommended = require("eslint-plugin-prettier/recommended");
const { fixupPluginRules } = require("@eslint/compat");
const reactNative = require('eslint-plugin-react-native');

module.exports = defineConfig([
expoConfig,
eslintPluginPrettierRecommended,
{
ignores: ["dist/*"],
plugins: {
'react-native': fixupPluginRules(reactNative)
},
rules: {
"prettier/prettier": [
"error",
{
printWidth: 100,
tabWidth: 2,
singleQuote: false,
bracketSameLine: true,
},
],
// Disallow console.log statements
"no-console": ["error"],
// React Native specific rules
"react-native/no-color-literals": 2,
"react-native/no-unused-styles": 2,
"react-native/no-raw-text": 2,
"react-native/sort-styles": 2,
},
},
]);

I have the same setup but no luck getting lints in code...