[infra] eslint: migrate to import-x

Author: brijeshb42

eslint.config.mjs

@@ -23,7 +23,7 @@ export default defineConfig(
       'jsx-a11y/no-autofocus': 'off',
     },
     settings: {
-      'import/resolver': {
+      'import-x/resolver': {
         typescript: {
           project: ['tsconfig.json'],
         },
@@ -47,7 +47,7 @@ export default defineConfig(
     files: ['packages/bundle-size-checker/**/*'],
     rules: {
       // Allow .js file extensions in import statements for ESM compatibility
-      'import/extensions': [
+      'import-x/extensions': [
         'error',
         'ignorePackages',
         {

packages/babel-plugin-minify-errors/__fixtures__/eslint.config.mjs

@@ -7,8 +7,8 @@ export default {
 
     // Babel import helpers do not add one.
     // Since this is auto generated code we don't care about code style.
-    'import/newline-after-import': 'off',
-    'import/no-unresolved': 'off',
+    'import-x/newline-after-import': 'off',
+    'import-x/no-unresolved': 'off',
     '@typescript-eslint/no-unused-vars': 'off',
     'no-undef': 'off',
   },

packages/code-infra/package.json

@@ -49,7 +49,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-module-utils": "^2.12.1",
-    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-import-x": "^4.16.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-mocha": "^11.1.0",
     "eslint-plugin-react": "^7.37.5",

packages/code-infra/src/eslint/airbnb/base.mjs

@@ -12,7 +12,7 @@ import baseStyle from 'eslint-config-airbnb-base/rules/style';
 import baseVariables from 'eslint-config-airbnb-base/rules/variables';
 import airbnbReact from 'eslint-config-airbnb/rules/react';
 import airbnbReactA11y from 'eslint-config-airbnb/rules/react-a11y';
-import eslintPluginImport from 'eslint-plugin-import';
+import eslintPluginImportX from 'eslint-plugin-import-x';
 import eslintPluginJsxA11y from 'eslint-plugin-jsx-a11y';
 import eslintPluginReact from 'eslint-plugin-react';
 
@@ -29,17 +29,40 @@ const baseES6Plugin = {
   rules: baseEs6.rules,
 };
 
+/**
+ * @param {Record<string, unknown>} obj
+ * @returns {Record<string, unknown>}
+ */
+function migrateToImportX(obj) {
+  /**
+   * @type {Record<string, unknown>}
+   */
+  const newObj = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (key.startsWith('import/')) {
+      newObj[key.replace('import/', 'import-x/')] = value;
+    } else {
+      newObj[key] = value;
+    }
+  }
+  return newObj;
+}
+
 const baseImportPlugin = {
   languageOptions: {
     globals: {
       ...globals.es2016,
     },
     parserOptions: baseImports.parserOptions,
   },
-  settings: baseImports.settings,
-  rules: baseImports.rules,
+  settings: baseImports.settings ? migrateToImportX(baseImports.settings) : undefined,
+  rules: baseImports.rules
+    ? /** @type {Partial<import('eslint').Linter.RulesRecord>} */ (
+        migrateToImportX(baseImports.rules)
+      )
+    : undefined,
   plugins: {
-    import: eslintPluginImport,
+    'import-x': eslintPluginImportX,
   },
 };
 

packages/code-infra/src/eslint/airbnb/typescript.mjs

@@ -21,19 +21,19 @@ export default /** @type {import('typescript-eslint').ConfigArray} */ (
   tseslint.config(
     {
       settings: {
-        'import/parsers': {
+        'import-x/parsers': {
           '@typescript-eslint/parser': ['.ts', '.tsx', '.d.ts'],
         },
-        'import/resolver': {
+        'import-x/resolver': {
           node: {
             extensions: ['.mjs', '.js', '.jsx', '.json', '.ts', '.tsx', '.d.ts'],
           },
         },
-        // Append 'ts' extensions to Airbnb 'import/extensions' setting
+        // Append 'ts' extensions to Airbnb 'import-x/extensions' setting
         // Original: ['.js', '.mjs', '.jsx']
-        'import/extensions': ['.js', '.mjs', '.jsx', '.ts', '.tsx', '.d.ts'],
+        'import-x/extensions': ['.js', '.mjs', '.jsx', '.ts', '.tsx', '.d.ts'],
         // Resolve type definition packages
-        'import/external-module-folders': ['node_modules', 'node_modules/@types'],
+        'import-x/external-module-folders': ['node_modules', 'node_modules/@types'],
       },
       rules: {
         camelcase: 'off',
@@ -77,9 +77,9 @@ export default /** @type {import('typescript-eslint').ConfigArray} */ (
         'require-await': 'off',
         '@typescript-eslint/require-await': baseBestPractices.rules?.['require-await'],
 
-        // Append 'ts' and 'tsx' to Airbnb 'import/extensions' rule
+        // Append 'ts' and 'tsx' to Airbnb 'import-x/extensions' rule
         // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md
-        'import/extensions': [
+        'import-x/extensions': [
           baseImportsRules['import/extensions'][0],
           baseImportsRules['import/extensions'][1],
           typeof baseImportsRules['import/extensions'][2] === 'object'
@@ -117,9 +117,9 @@ export default /** @type {import('typescript-eslint').ConfigArray} */ (
         'valid-typeof': 'off',
         // The following rules are enabled in Airbnb config, but are recommended to be disabled within TypeScript projects
         // See: https://github.com/typescript-eslint/typescript-eslint/blob/13583e65f5973da2a7ae8384493c5e00014db51b/docs/linting/TROUBLESHOOTING.md#eslint-plugin-import
-        'import/named': 'off',
-        'import/no-named-as-default-member': 'off',
-        'import/no-unresolved': 'off',
+        'import-x/named': 'off',
+        'import-x/no-named-as-default-member': 'off',
+        'import-x/no-unresolved': 'off',
       },
     },
   )

packages/code-infra/src/eslint/baseConfig.mjs

@@ -1,6 +1,6 @@
 import { includeIgnoreFile } from '@eslint/compat';
 import prettier from 'eslint-config-prettier/flat';
-import reactCompilerPlugin from 'eslint-plugin-react-compiler';
+import { configs as reactCompilerConfigs } from 'eslint-plugin-react-compiler';
 import { configs as reactHookConfigs } from 'eslint-plugin-react-hooks';
 import globals from 'globals';
 import * as tseslint from 'typescript-eslint';
@@ -40,7 +40,7 @@ export function createBaseConfig(
       airbnbReactConfig,
       airbnbTypescript,
       reactHookConfigs.recommended,
-      enableReactCompiler ? reactCompilerPlugin.configs.recommended : {},
+      enableReactCompiler ? reactCompilerConfigs.recommended : {},
       prettier,
       {
         name: 'typescript-eslint-parser',
@@ -58,10 +58,10 @@ export function createBaseConfig(
           'material-ui': muiPlugin,
         },
         settings: {
-          'import/parsers': {
+          'import-x/parsers': {
             '@typescript-eslint/parser': ['.ts', '.tsx'],
           },
-          'import/resolver': {
+          'import-x/resolver': {
             typescript: {
               project: ['tsconfig.node.json', 'apps/*/tsconfig.json', 'packages/*/tsconfig.json'],
             },
@@ -72,7 +72,7 @@ export function createBaseConfig(
       {
         files: ['**/*.mjs'],
         rules: {
-          'import/extensions': [
+          'import-x/extensions': [
             'error',
             'ignorePackages',
             {

packages/code-infra/src/eslint/material-ui/config.mjs

@@ -68,15 +68,15 @@ export function createCoreConfig(options = {}) {
         ],
 
         // Not needed in general, can be turned on for specific files
-        'import/prefer-default-export': 'off',
+        'import-x/prefer-default-export': 'off',
         // Not sure why it doesn't work
-        'import/named': 'off',
-        'import/no-cycle': 'off',
+        'import-x/named': 'off',
+        'import-x/no-cycle': 'off',
         // Missing yarn workspace support
-        'import/no-extraneous-dependencies': 'off',
+        'import-x/no-extraneous-dependencies': 'off',
         // The code is already coupled to webpack. Prefer explicit coupling.
-        'import/no-webpack-loader-syntax': 'off',
-        'import/no-relative-packages': 'error',
+        'import-x/no-webpack-loader-syntax': 'off',
+        'import-x/no-relative-packages': 'error',
 
         // doesn't work?
         'jsx-a11y/label-has-associated-control': [

packages/code-infra/src/eslint/testConfig.mjs

@@ -19,7 +19,7 @@ export const baseSpecRules = {
     '@typescript-eslint/no-unused-vars': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
 
-    'import/prefer-default-export': 'off',
+    'import-x/prefer-default-export': 'off',
 
     'jsx-a11y/anchor-has-content': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
@@ -60,7 +60,7 @@ export function createTestConfig(options = {}) {
         },
         rules: {
           // does not work with wildcard imports. Mistakes will throw at runtime anyway
-          'import/named': 'off',
+          'import-x/named': 'off',
           'material-ui/disallow-active-element-as-key-event-target': 'error',
 
           // disable eslint-plugin-jsx-a11y