Next.js error "contextOrFilename.getFilename is not a function" during pnpm lint

Help
, , , ,
1

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\NextJs\nextjs-app\nextjs-dashboard>pnpm lint

> @ lint E:\Code\Learn\WebDev\React-Next.js\NextJs\nextjs-app\nextjs-dashboard
> eslint .


Oops! Something went wrong! :(

ESLint: 10.0.3

TypeError: Error while loading rule 'react/display-name': contextOrFilename.getFilename is not a function
Occurred while linting E:\Code\Learn\WebDev\React-Next.js\NextJs\nextjs-app\nextjs-dashboard\app\dashboard\(overview)\loading.tsx
    at resolveBasedir (E:\Code\Learn\WebDev\React-Next.js\NextJs\nextjs-app\nextjs-dashboard\node_modules\.pnpm\eslint-plugin-react@7.37.5_eslint@10.0.3_jiti@1.21.7_\node_modules\eslint-plugin-react\lib\util\version.js:31:100)
    at detectReactVersion (E:\Code\Learn\WebDev\React-Next.js\NextJs\nextjs-app\nextjs-dashboard\node_modules\.pnpm\eslint-plugin-react@7.37.5_eslint@10.0.3_jiti@1.21.7_\node_modules\eslint-plugin-react\lib\util\version.js:85:19)
    at getReactVersionFromContext (E:\Code\Learn\WebDev\React-Next.js\NextJs\nextjs-app\nextjs-dashboard\node_modules\.pnpm\eslint-plugin-react@7.37.5_eslint@10.0.3_jiti@1.21.7_\node_modules\eslint-plugin-react\lib\util\version.js:116:25)
    at testReactVersion (E:\Code\Learn\WebDev\React-Next.js\NextJs\nextjs-app\nextjs-dashboard\node_modules\.pnpm\eslint-plugin-react@7.37.5_eslint@10.0.3_jiti@1.21.7_\node_modules\eslint-plugin-react\lib\util\version.js:181:28)
    at usedPropTypesInstructions (E:\Code\Learn\WebDev\React-Next.js\NextJs\nextjs-app\nextjs-dashboard\node_modules\.pnpm\eslint-plugin-react@7.37.5_eslint@10.0.3_jiti@1.21.7_\node_modules\eslint-plugin-react\lib\util\usedPropTypes.js:307:36)
    at Components.componentRule (E:\Code\Learn\WebDev\React-Next.js\NextJs\nextjs-app\nextjs-dashboard\node_modules\.pnpm\eslint-plugin-react@7.37.5_eslint@10.0.3_jiti@1.21.7_\node_modules\eslint-plugin-react\lib\util\Components.js:940:37)
    at createRuleListeners (E:\Code\Learn\WebDev\React-Next.js\NextJs\nextjs-app\nextjs-dashboard\node_modules\.pnpm\eslint@10.0.3_jiti@1.21.7\node_modules\eslint\lib\linter\linter.js:497:15)
    at E:\Code\Learn\WebDev\React-Next.js\NextJs\nextjs-app\nextjs-dashboard\node_modules\.pnpm\eslint@10.0.3_jiti@1.21.7\node_modules\eslint\lib\linter\linter.js:623:7
    at Array.forEach (<anonymous>)
    at runRules (E:\Code\Learn\WebDev\React-Next.js\NextJs\nextjs-app\nextjs-dashboard\node_modules\.pnpm\eslint@10.0.3_jiti@1.21.7\node_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!

6

check this one [ESLint v10]: TypeError: contextOrFilename.getFilename is not a function when running ESLint v10 · Issue #89764 · vercel/next.js · GitHub for temp fix

7

The error comes from tooling mismatch not from you Luknuts56, just downgrade ESLint and you’re good :+1: