Resolving Prettier + React: context.getPhysicalFilename is not a function

If you’ve recently upgraded to eslint-plugin-prettier@^4 on an existing React project, you may have encountered the cryptic error:

Run yarn build
Creating an optimized production build...
Failed to compile.

Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function
Occurred while linting /home/runner/work/$repository/$repository/src/index.tsx

Error: Process completed with exit code 1. 

This error occurs when using a version of ESLint prior to 7.28.0, but despite having a newer version of ESLint in your package.json, you will still encounter this error. Why, and how do you fix it?

If you’re just here for solutions, I won’t waste your time.

yarn up -R eslint

Why is this happening?

Let’s understand the problem and grow as engineers.

As an example, you can see the failing build step on my portfolio. The most helpful debug information here is that the ESLint step is passing. Why is the ESLint command passing when called explicitly, but failing when called as a part of the build?

The ESLint command, when called explicitly, uses the version of ESLint installed by package.json. In this case, it uses the…