[Solved] Resolveing prettier context.getPhysicalFilename is not a function in react

Problem: Recently upgraded to eslint-plugin-prettier@^4 plugin on an existing React project, then you have faced a wired 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 is mainly when you are using a version of ESLint prior to 7.28.0, but having a new version of ESLint in your package.json, you will still get this error. Why, and how do you fix it? Let's talk about this -

Why is this happening?

ESLint command, when called, uses the version of ESLint installed package. this case uses a version greater than 7.28.0. This confirms the Prettier ESLint plugin is correctly installed with ESLint.

As a typical React project, our build step is using react-scripts.react-scripts is requesting eslint@^7.11.0. This should be matched with version  eslint@^7.28.0.

Despite the eslint-plugin-prettier containing eslint@^7.28.0 as a peer dependency, you do not receive any warnings at install, because you do have eslint@^7.28.0 installed. You receive those errors at build time only. because, despite having the correct version installed, react-scripts is using the wrong version.

Solution: 

You can force update its dependency on ESLint  by using the recursive yarn or npm installation command:

yarn up -R eslint.

Not only will Yarn upgrade ESLint in your package file, but it will upgrade ESLint for all dependencies that are needed. Thus, yarn build will now use the newest version of ESLint and successfully done with no error.

Thank you for reading the article. If you have any suggestions please comment below. Your comment is always important to us.