eslintrc.cjs is Outdated

[topeogunleye]

Please kindly include a link to https://eslint.org/blog/2024/05/eslint-configuration-migrator/ in your video description so that people who encounter module not defined error from their eslintrc.cjs file can use the migrator to update their config file: eslintrc.cjs to the latest eslint config format which is eslint.config.mjs or eslint.config.js.

	Old vs New Config Format
Old Config
New Config

[ofer-shaham]

@topeogunleye would you mind providing the code as well ?

[topeogunleye]

encounter module not defined error from their eslintrc.cjs file can use the migrator to

@ofer-shaham, I don't mind. Thank you. Please kindly find the code below: Old config file: eslintrc.cjs:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    'react/react-in-jsx-scope': 0,
  },
};

New config Filename: eslint.config.mjs

import react from "eslint-plugin-react";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import prettier from "eslint-plugin-prettier";
import globals from "globals";
import tsParser from "@typescript-eslint/parser";
import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: js.configs.recommended,
    allConfig: js.configs.all
});

export default [...compat.extends(
    "airbnb",
    "airbnb-typescript",
    "airbnb/hooks",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
), {
    plugins: {
        react,
        "@typescript-eslint": typescriptEslint,
        prettier,
    },

    languageOptions: {
        globals: {
            ...globals.browser,
        },

        parser: tsParser,
        ecmaVersion: "latest",
        sourceType: "module",

        parserOptions: {
            project: ["./tsconfig.json", "./tsconfig.node.json"],
        },
    },

    rules: {
        "react/react-in-jsx-scope": 0,
    },
}];