chore(deps): FE-454 Update to ESLint 9

README.md

@@ -8,5 +8,18 @@ For installation guide and setup please visit each package's readme.
 
 [@bigcommerce/eslint-plugin](packages/eslint-plugin)
 
-## ESlint 9 Compatibility
-Due to a [significant change](https://eslint.org/blog/2023/10/flat-config-rollout-plans/) in ESLint 9, this configuration set currently **requires** ESLint 8. In order to avoid peer dependency resolution issues, you need to also install `eslint` in your project, using the same version range as that found in [package.json](./package.json).
+## ESLint 9 Compatibility
+
+This configuration now **requires ESLint 9** and uses the new [flat config format](https://eslint.org/docs/latest/use/configure/configuration-files).
+
+### Breaking Changes from v2.x
+
+- **ESLint 9 Required**: This version requires ESLint ^9.0.0
+- **Flat Config Format**: Configurations now use ESLint's flat config format
+- **ES Modules**: All packages now use ES modules (`"type": "module"`)
+- **No Patch Required**: The `require('@bigcommerce/eslint-config/patch')` is no longer needed (and won't work)
+- **Import Instead of Require**: Use `import` instead of `require` in your config files
+
+### Migration Guide
+
+See the package README files for migration instructions from ESLint 8 to ESLint 9.

eslint.config.js

@@ -0,0 +1,39 @@
+import globals from 'globals';
+
+import config from './packages/eslint-config/index.js';
+
+const baseConfig = await config;
+
+export default [
+  {
+    ignores: ['**/node_modules/**', '**/__snapshots__/**', '**/dist/**', '**/build/**'],
+  },
+  ...baseConfig,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        },
+      },
+      'import/core-modules': [
+        '@typescript-eslint/eslint-plugin',
+        '@typescript-eslint/parser',
+        '@typescript-eslint/rule-tester',
+      ],
+    },
+    rules: {
+      // Allow .js extensions in ES module imports
+      'import/extensions': ['error', 'ignorePackages'],
+      // Allow __dirname in ES modules
+      'no-underscore-dangle': ['error', { allow: ['__dirname', '__filename'] }],
+      // Allow dynamic imports without webpack chunkname
+      'import/dynamic-import-chunkname': 'off',
+    },
+  },
+];

package.json

@@ -2,6 +2,7 @@
   "name": "@bigcommerce/eslint",
   "version": "1.0.1",
   "description": "Default ESLint configuration used at BigCommerce",
+  "type": "module",
   "private": true,
   "author": "BigCommerce",
   "license": "MIT",
@@ -16,14 +17,16 @@
   "scripts": {
     "lint": "eslint . --ext .js",
     "release": "lerna publish --sign-git-commit --sign-git-tag --git-remote origin --pre-dist-tag next",
-    "test": "jest --projects packages/*"
+    "test": "NODE_OPTIONS='--experimental-vm-modules' jest --projects packages/*"
   },
   "devDependencies": {
-    "eslint": "^8.14.0",
+    "eslint": "^9.0.0",
     "jest": "^29.7.0",
     "lerna": "^8.1.2",
     "typescript": "^5.0.2"
   },
-  "dependencies": {},
+  "dependencies": {
+    "globals": "^15.0.0"
+  },
   "packageManager": "[email protected]+sha256.c17d3797fb9a9115bf375e31bfd30058cac6bc9c3b8807a3d8cb2094794b51ca"
 }

packages/eslint-config/README.md

@@ -1,30 +1,27 @@
 # @bigcommerce/eslint-config
 
-This package is a configuration preset for [ESLint](https://eslint.org/).
-
+This package is a configuration preset for [ESLint](https://eslint.org/) using the new flat config format (ESLint 9+).
 
 ## Install
 
 ```sh
-npm install --save-dev eslint prettier
+npm install --save-dev eslint@^9.0.0 prettier
 npm install --save-dev @bigcommerce/eslint-config
 ```
 
-
 ## Usage
 
-Add `@bigcommerce/eslint-config` to your project's ESLint configuration file. i.e.:
+Create an `eslint.config.js` file in your project root:
 
 ```js
-// .eslintrc.js
-require('@bigcommerce/eslint-config/patch');
+// eslint.config.js
+import config from '@bigcommerce/eslint-config';
 
-module.exports = {
-  extends: ['@bigcommerce/eslint-config'],
-};
+export default config;
 ```
 
-This config also runs prettier via eslint, add the following to your `package.json`
+This config also runs prettier via eslint, add the following to your `package.json`:
+
 ```json
 {
   "prettier": "@bigcommerce/eslint-config/prettier"
@@ -33,28 +30,49 @@ This config also runs prettier via eslint, add the following to your `package.js
 
 Stylistic rules are considered `warnings` for better developer experience, however, we recommend
 running CI with:
+
 ```
 eslint --max-warnings 0
 ```
 
 ## Usage with Next.js
 
-Make sure to also extend from next's `core-web-vitals`.
+For Next.js projects, you can combine this config with Next.js's built-in ESLint configuration:
 
 ```js
-// .eslintrc.js
-require('@bigcommerce/eslint-config/patch');
+// eslint.config.js
+import config from '@bigcommerce/eslint-config';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const compat = new FlatCompat();
 
-module.exports = {
-  extends: ['@bigcommerce/eslint-config', 'next/core-web-vitals'],
-};
+export default [
+  ...config,
+  ...compat.extends('next/core-web-vitals'),
+];
 ```
 
+## Migration from ESLint 8
+
+### Breaking Changes
+
+- **ESLint 9 Required**: This version requires ESLint ^9.0.0
+- **Flat Config Format**: Use `eslint.config.js` instead of `.eslintrc.js`
+- **ES Modules**: Configuration must use ES module syntax
+- **No Patch Required**: Remove `require('@bigcommerce/eslint-config/patch')`
+
+### Migration Steps
+
+1. **Update ESLint**: `npm install --save-dev eslint@^9.0.0`
+2. **Update this package**: `npm install --save-dev @bigcommerce/eslint-config@latest`
+3. **Delete old config**: Remove `.eslintrc.js` or `.eslintrc.json`
+4. **Create new config**: Create `eslint.config.js` with the usage example above
+5. **Remove patch import**: Delete any `require('@bigcommerce/eslint-config/patch')` calls
+
 ## Release
 
 Please refer to the documentation of [lerna](https://github.com/lerna/lerna) for release options.
 
-
 ## License
 
 MIT