use with new eslint config system (eslint.config.js)

[ursmeili]

I try to use the eslint-plugin-react-native together with the new eslint config system (eslint.config.js)

here is my eslint.config.js:

const react = require('eslint-plugin-react');
const reactNative = require('eslint-plugin-react-native');
const reactRecommended = require('eslint-plugin-react/configs/recommended');
const babelEsLintParser = require('@babel/eslint-parser');

module.exports = {
  files: ['{libs,src,test}/**/*.{js,jsx,ts,tsx}'],
  ignores: ['**/*.spec.{js,jsx,ts,tsx}'],
  plugins: { react, 'react-native': reactNative },
  ...reactRecommended,
  languageOptions: {
    ...reactRecommended.languageOptions,
    parser: babelEsLintParser,
  },
  rules: {
    ...reactRecommended.rules,
    'no-debugger': 'error',
    'no-var': 'error',
    'react-native/no-unused-styles': 2,
    'react-native/split-platform-components': 2,
    'react-native/no-inline-styles': 2,
    'react-native/no-color-literals': 2,
    'react-native/no-raw-text': 2,
    'react-native/no-single-element-style-arrays': 2,
  },
};

however, this gives me the follwing error when running eslint:

TypeError: Key "rules": Key "react-native/no-unused-styles": Could not find plugin "react-native".
    at throwRuleNotFoundError (C:\git\MonoRepo\mobile\xenon\node_modules\eslint\lib\config\rule-validator.js:66:11)
    at RuleValidator.validate (C:\git\MonoRepo\mobile\xenon\node_modules\eslint\lib\config\rule-validator.js:128:17)
    at [finalizeConfig] (C:\git\MonoRepo\mobile\xenon\node_modules\eslint\lib\config\flat-config-array.js:231:23)
    at FlatConfigArray.getConfig (C:\git\MonoRepo\mobile\xenon\node_modules\@humanwhocodes\config-array\api.js:938:55)
    at FlatESLint.calculateConfigForFile (C:\git\MonoRepo\mobile\xenon\node_modules\eslint\lib\eslint\flat-eslint.js:1087:24)
    at async FlatESLint.isPathIgnored (C:\git\MonoRepo\mobile\xenon\node_modules\eslint\lib\eslint\flat-eslint.js:1109:24)
Process finished with exit code -1

how can I corrctly use this plugin with the new config system? An update of the docs would be very welcome, similar to eslint-plugin-react

[ursmeili]

I solved it myself. the ...reactRecommended has to be before the plugins, then it works.

working solution:

const react = require('eslint-plugin-react');
const reactNative = require('eslint-plugin-react-native');

// see https://github.com/jsx-eslint/eslint-plugin-react#configuration-new-eslintconfigjs

const reactRecommended = require('eslint-plugin-react/configs/recommended');
const babelEsLintParser = require('@babel/eslint-parser');

module.exports = {
  files: ['{libs,src,test}/**/*.{js,jsx,ts,tsx}'],
  ignores: ['**/*.spec.{js,jsx,ts,tsx}'],
  ...reactRecommended,
  plugins: { react, 'react-native': reactNative },
  languageOptions: {
    ...reactRecommended.languageOptions,
    parser: babelEsLintParser,
  },
  rules: {
    ...reactRecommended.rules,
    'no-debugger': 'error',
    'no-var': 'error',
    'react/react-in-jsx-scope': 'off',
    'react-native/no-unused-styles': 2,
    'react-native/split-platform-components': 2,
    'react-native/no-inline-styles': 1,
    'react-native/no-color-literals': 2,
    'react-native/no-raw-text': 2,
    'react-native/no-single-element-style-arrays': 2,
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};