How to fix error "Prettier resolveConfig.sync is not a function"

TL;DR

To Fix error "Prettier resolveConfig.sync is not a function", use overrides field in package.json

Intro

For each js project, i have been using my own eslint and prettier packages published at npm. But when i started to use react-native, i got error "Prettier resolveConfig.sync is not a function".

info

development environment is below.

• pnpm: 8.13.1
• react-native: 0.73.2
• prettier: 3.0.3

What is a problem?

When you init your react-native project using npx react-native init project, react-native install @react-native/eslint-config and @react-native/eslint-config use eslint-plugin-prettier: ^4.2.1. But it's not compatible with prettier: 3.0.3 that require eslint-plugin-prettier version 5 or later.

How can i fix it?

There are two solutions we can choose.

1. Downgrade prettier to 2.x
2. force eslint-plugin-prettier to use 5.x using overrides field in package.json

First one is easy to do, but i don't want to downgrade prettier even though there is compatible version. So i choose the second one.

What is overrides field in package.json?

warning

If you use yarn or npm, you have to use other fields like resolutions. For detail, please check documentation of each package manager.

Definition of overrides field is below in pnpm.

This field allows you to instruct pnpm to override any dependency in the dependency graph. This is useful to enforce all your packages to use a single version of a dependency, backport a fix, or replace a dependency with a fork.

Literally, you can override any packages you want to use specific version.

Solution

Add overrides field in package.json like below.

{
  "overrides": {
    "eslint-plugin-prettier": "5.0.1"
  }
}