(edited)
Hello,
I was following along with the Next.js lessons and I’ve encountered an error while following the instructions for chapter 15. Specifically, in the ‘Using the ESLint accessibility plugin in Next.js’ section of the chapter.
Console Output
E:\Code\Learn\WebDev\React-Next.js\NextJsextjs-appextjs-dashboard>pnpm lint
> @ lint E:\Code\Learn\WebDev\React-Next.js\NextJsextjs-appextjs-dashboard> eslint .
Oops! Something went wrong! :(
ESLint: 10.0.3
TypeError: Error while loading rule 'react/display-name': contextOrFilename.getFilename is not a functionOccurred while linting E:\Code\Learn\WebDev\React-Next.js\NextJsextjs-appextjs-dashboard\app\dashboard\(overview)\loading.tsx at resolveBasedir (E:\Code\Learn\WebDev\React-Next.js\NextJsextjs-appextjs-dashboardode_modules\.pnpm\eslint-plugin-react@7.37.5_eslint@10.0.3_jiti@1.21.7_ode_modules\eslint-plugin-react\lib\util\version.js:31:100) at detectReactVersion (E:\Code\Learn\WebDev\React-Next.js\NextJsextjs-appextjs-dashboardode_modules\.pnpm\eslint-plugin-react@7.37.5_eslint@10.0.3_jiti@1.21.7_ode_modules\eslint-plugin-react\lib\util\version.js:85:19) at getReactVersionFromContext (E:\Code\Learn\WebDev\React-Next.js\NextJsextjs-appextjs-dashboardode_modules\.pnpm\eslint-plugin-react@7.37.5_eslint@10.0.3_jiti@1.21.7_ode_modules\eslint-plugin-react\lib\util\version.js:116:25) at testReactVersion (E:\Code\Learn\WebDev\React-Next.js\NextJsextjs-appextjs-dashboardode_modules\.pnpm\eslint-plugin-react@7.37.5_eslint@10.0.3_jiti@1.21.7_ode_modules\eslint-plugin-react\lib\util\version.js:181:28) at usedPropTypesInstructions (E:\Code\Learn\WebDev\React-Next.js\NextJsextjs-appextjs-dashboardode_modules\.pnpm\eslint-plugin-react@7.37.5_eslint@10.0.3_jiti@1.21.7_ode_modules\eslint-plugin-react\lib\util\usedPropTypes.js:307:36) at Components.componentRule (E:\Code\Learn\WebDev\React-Next.js\NextJsextjs-appextjs-dashboardode_modules\.pnpm\eslint-plugin-react@7.37.5_eslint@10.0.3_jiti@1.21.7_ode_modules\eslint-plugin-react\lib\util\Components.js:940:37) at createRuleListeners (E:\Code\Learn\WebDev\React-Next.js\NextJsextjs-appextjs-dashboardode_modules\.pnpm\eslint@10.0.3_jiti@1.21.7ode_modules\eslint\lib\linter\linter.js:497:15) at E:\Code\Learn\WebDev\React-Next.js\NextJsextjs-appextjs-dashboardode_modules\.pnpm\eslint@10.0.3_jiti@1.21.7ode_modules\eslint\lib\linter\linter.js:623:7 at Array.forEach (<anonymous>) at runRules (E:\Code\Learn\WebDev\React-Next.js\NextJsextjs-appextjs-dashboardode_modules\.pnpm\eslint@10.0.3_jiti@1.21.7ode_modules\eslint\lib\linter\linter.js:557:31) ELIFECYCLE Command failed with exit code 2.package.json
{ "private": true, "scripts": { "build": "next build", "dev": "next dev --turbopack", "start": "next start", "lint": "eslint ." }, "dependencies": { "@heroicons/react": "^2.2.0", "@tailwindcss/forms": "^0.5.10", "autoprefixer": "10.4.20", "bcrypt": "^5.1.1", "clsx": "^2.1.1", "next": "latest", "next-auth": "5.0.0-beta.25", "postcss": "8.5.1", "postgres": "^3.4.6", "react": "latest", "react-dom": "latest", "tailwindcss": "3.4.17", "typescript": "5.7.3", "use-debounce": "^10.0.4", "zod": "^3.25.17" }, "devDependencies": { "@types/bcrypt": "^5.0.2", "@types/node": "22.10.7", "@types/react": "19.0.7", "@types/react-dom": "19.0.3", "eslint": "10.0.3", "eslint-config-next": "^16.1.7" }, "pnpm": { "onlyBuiltDependencies": [ "bcrypt", "sharp" ], "ignoredBuiltDependencies": [ "unrs-resolver" ] }}eslint.config.mjs
import { defineConfig, globalIgnores } from 'eslint/config';import nextVitals from 'eslint-config-next/core-web-vitals';
const eslintConfig = defineConfig([ ...nextVitals, globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']),]);
export default eslintConfig;I only recently started learning React and Next.js after learning HTML and CSS and I’ve been stuck on this for quite some time. I have attempted using a later version of eslint and changing the config file and extension to match, however, doing this resulted in more error. Any suggestions or a solution on how to fix this would be much appreciated!
