[infra] Migrate to import-x

Author: brijeshb42

eslint.config.mjs

@@ -32,7 +32,7 @@ export default defineConfig(
       'material-ui/no-empty-box': 'off',
     },
     settings: {
-      'import/resolver': {
+      'import-x/resolver': {
         typescript: {
           project: ['tsconfig.json'],
         },
@@ -62,7 +62,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

@@ -52,7 +52,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/baseConfig.mjs

@@ -1,7 +1,7 @@
 import { includeIgnoreFile } from '@eslint/compat';
 import eslintJs from '@eslint/js';
 import prettier from 'eslint-config-prettier/flat';
-import importPlugin from 'eslint-plugin-import';
+import importPlugin from 'eslint-plugin-import-x';
 import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
 import reactPlugin from 'eslint-plugin-react';
 import { configs as reactCompilerPluginConfigs } from 'eslint-plugin-react-compiler';
@@ -66,7 +66,7 @@ export function createBaseConfig(
       {
         files: ['**/*.mjs'],
         rules: {
-          'import/extensions': [
+          'import-x/extensions': [
             'error',
             'ignorePackages',
             {

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

@@ -80,15 +80,15 @@ const criticalAirbnbRules = {
   'no-promise-executor-return': 'error',
 
   // Import rules (critical ones not in recommended)
-  'import/order': ['error', { groups: [['builtin', 'external', 'internal']] }],
-  'import/first': 'error',
-  'import/no-mutable-exports': 'error',
-  'import/newline-after-import': 'error',
-  // https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/namespace.md
-  'import/namespace': 'off',
+  'import-x/order': ['error', { groups: [['builtin', 'external', 'internal']] }],
+  'import-x/first': 'error',
+  'import-x/no-mutable-exports': 'error',
+  'import-x/newline-after-import': 'error',
+  // https://github.com/import-js/eslint-plugin-import-x/blob/master/docs/rules/namespace.md
+  'import-x/namespace': 'off',
   // Forbid require() calls with expressions
-  // https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md
-  'import/no-dynamic-require': 'error',
+  // https://github.com/import-js/eslint-plugin-import-x/blob/master/docs/rules/no-dynamic-require.md
+  'import-x/no-dynamic-require': 'error',
 
   // Additional best practices
   'default-case': ['error', { commentPattern: '^no default$' }],
@@ -177,9 +177,9 @@ const criticalAirbnbRules = {
 const typescriptOverrides = {
   // 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',
 
   // TypeScript equivalents of ESLint rules
   'default-param-last': 'off',
@@ -238,7 +238,7 @@ const typescriptOverrides = {
   '@typescript-eslint/no-this-alias': 'off',
 
   // TypeScript extensions handling
-  'import/extensions': [
+  'import-x/extensions': [
     'error',
     'ignorePackages',
     {
@@ -310,23 +310,23 @@ export function createCoreConfig(options = {}) {
     {
       name: 'material-ui-base',
       settings: {
-        'import/resolver': {
+        'import-x/resolver': {
           node: {
             extensions: ['.mjs', '.js', '.json'],
           },
           typescript: {
             project: ['tsconfig.node.json', 'apps/*/tsconfig.json', 'packages/*/tsconfig.json'],
           },
         },
-        'import/extensions': ['.js', '.mjs', '.jsx', '.ts', '.tsx', '.d.ts'],
-        'import/core-modules': [],
-        'import/ignore': ['node_modules', '\\.(css|svg|json)$'],
+        'import-x/extensions': ['.js', '.mjs', '.jsx', '.mts', '.ts', '.tsx', '.d.ts'],
+        'import-x/core-modules': [],
+        'import-x/ignore': ['node_modules', '\\.(css|svg|json)$'],
         // Override with TypeScript-specific settings
-        'import/parsers': {
+        'import-x/parsers': {
           '@typescript-eslint/parser': ['.ts', '.tsx'],
         },
         // Extend Airbnb extensions with TypeScript
-        'import/external-module-folders': ['node_modules', 'node_modules/@types'],
+        'import-x/external-module-folders': ['node_modules', 'node_modules/@types'],
       },
       rules: {
         ...criticalAirbnbRules,
@@ -383,15 +383,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

@@ -20,7 +20,7 @@ export const baseSpecRules = {
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
 
-    'import/prefer-default-export': 'off',
+    'import-x/prefer-default-export': 'off',
 
     'jsx-a11y/anchor-has-content': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
@@ -61,7 +61,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