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:

8

Hi Luknuts56,

This one looks like a tooling-version mismatch, not a problem with your loading.tsx file.

Your package.json has:

"eslint": "10.0.3",
"eslint-config-next": "^16.1.7"

and the stack trace is failing inside eslint-plugin-react while loading the react/display-name rule. There’s an open Next.js issue for this same ESLint 10 error:

For now I’d pin ESLint back to v9 instead of using ESLint 10:

pnpm add -D eslint@^9 eslint-config-next@latest
pnpm lint

If it still keeps ESLint 10 because of the lockfile, do a clean install:

rm -rf node_modules pnpm-lock.yaml
pnpm install
pnpm lint

One more thing: since you’re following a course, I’d avoid using "latest" for next, react, and react-dom. The tutorial may have been written for a slightly older version, while latest can pull in newer Next/React/ESLint behavior than the lesson expects.

So the short version is: downgrade/pin ESLint to v9, reinstall, and rerun pnpm lint.