next-lint Doesn't Support ESLint 9
Problem
Link to the code that reproduces this issue https://codesandbox.io/p/devbox/vigilant-pine-6wmz8y To Reproduce 1. Add `next lint` script to package.json per https://nextjs.org/docs/app/building-your-application/configuring/eslint 2. Add `.eslintrc.json` to project per https://nextjs.org/docs/app/building-your-application/configuring/eslint [code block] 3. Run lint and get an error [code block] Current vs. Expected behavior Expected lint to run successfully, but it failed with errors. Provide environment information [code block] Which area(s) are affected? (Select all that apply) ESLint (eslint-config-next) Which stage(s) are affected? (Select all that apply) next dev (local), next build (local), next start (local) Additional context It looks like this is coming from https://github.com/vercel/next.js/blob/canary/packages/next/src/cli/next-lint.ts. This needs to be changed to support ESLint 9's flat config https://eslint.org/docs/latest/use/migrate-to-9.0.0#flat-config. The migration guide is at https://eslint.org/docs/latest/use/configure/migration-guide <sub>NEXT-3112</sub>
Unverified for your environment
Select your OS to check compatibility.
2 Fixes
Update next-lint to Support ESLint 9 Flat Config
The current implementation of next-lint does not support the flat configuration format introduced in ESLint 9. This leads to errors when trying to run linting commands, as the configuration expected by next-lint is incompatible with the new format.
Awaiting Verification
Be the first to verify this fix
- 1
Update ESLint and next-lint
Ensure that both ESLint and next-lint are updated to the latest versions that support ESLint 9 features.
bashnpm install eslint@latest eslint-config-next@latest - 2
Modify .eslintrc.json for Flat Config
Update your .eslintrc.json file to use the flat configuration format as per ESLint 9 documentation. This may involve changing the structure of your configuration.
json{ "$schema": "https://eslint.org/schema/flat-config-schema.json", "overrides": [ { "files": ["*.js", "*.jsx", "*.ts", "*.tsx"], "rules": { "semi": "error" } } ] } - 3
Update next lint Script
Ensure that the next lint script in your package.json is correctly set up to utilize the updated ESLint configuration.
json"scripts": { "lint": "next lint" } - 4
Run Linting Command
Execute the linting command to verify that the changes have resolved the issue and linting runs successfully.
bashnpm run lint
Validation
Confirm that the linting command runs without errors and that the expected linting rules are applied to your codebase. Check for any warnings or errors in the output.
Sign in to verify this fix
1 low-confidence fix
Update next-lint to Support ESLint 9 Flat Config
The current implementation of next-lint does not recognize the flat configuration format introduced in ESLint 9. This results in compatibility issues when trying to run linting commands, leading to errors during the linting process.
Awaiting Verification
Be the first to verify this fix
- 1
Update ESLint and next-lint
Ensure that both ESLint and next-lint are updated to their latest versions to support the new flat config feature.
bashnpm install eslint@latest eslint-config-next@latest --save-dev - 2
Modify ESLint Configuration
Create or update your ESLint configuration file to use the flat config format. This involves defining your rules and settings in a JavaScript file instead of JSON.
javascriptmodule.exports = [ // Your ESLint rules here ]; - 3
Update next lint Script
Ensure your package.json includes the correct script to run the updated linting process. This should point to the correct ESLint configuration file.
json"lint": "eslint . --ext .js,.jsx,.ts,.tsx" - 4
Test Linting
Run the lint command to verify that the changes have resolved the issue. Check for any errors and ensure that the output is as expected.
bashnpm run lint - 5
Review ESLint Output
After running the lint command, review the output for any remaining issues. If errors persist, revisit the ESLint configuration for any misconfigurations.
noneCheck console output for linting errors.
Validation
Confirm that the lint command runs successfully without errors. Additionally, verify that the ESLint output reflects the expected linting results based on your configuration.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep