TypeError: prettier.resolveConfig.sync is not a function

Type errors are the very reason TypeScript was developed. In JavaScript a type error tends to occur when there are breaking API changes without your code being informed about it because it lacks types. Let's explore this further using the example of Prettier v3 which removed the resolveConfig.sync functionality, resuting in breaking plugins like pretty-quick or eslint-plugin-prettier.

Contents

• Breaking Changes in Prettier 3
• Replacing pretty-quick with lefthook

Breaking Changes in Prettier 3

When Prettier v3 was released, it introduced breaking changes to its API. One notable change was the removal of synchronous public APIs in favor of asynchronous ones. As a result, Prettier plugins that relied on these APIs started to fail and produced the following error:

TypeError: prettier.resolveConfig.sync is not a function

Some of the plugins that failed were eslint-plugin-prettier v4 and pretty-quick v3. The team behind eslint-plugin-prettier has resolved the issue, so you can update to version 5 to ensure compatibility with Prettier v3. Unfortunately, the pretty-quick plugin has not been updated at the time of writing.

Replacing pretty-quick with lefthook

The pretty-quick plugin executes Prettier on modified or staged files and is commonly integrated with husky to align with Git's lifecycle. All these processes can be substituted with Lefthook.

Here are the instructions:

1. Uninstall husky and ensure it leaves no traces in the .git/hooks directory of your repository.
2. Remove pretty-quick from your package.json file.
3. Delete any specific configuration files (e.g., .huskyrc.json).
4. Add lefthook to the devDependencies section in your package.json file.
5. Run the installation command for your package manager (npm install, yarn install, or similar).
6. Confirm that the new Git hooks are in place by executing npx lefthook install --force.
7. Customize the lefthook.yml file according to your requirements.

Below is an example lefthook configuration calling Prettier and ESLint:

pre-commit:
  parallel: true
  commands:
    format:
      glob: '*.{css,html,json,less,md,scss,yml}'
      run: npx prettier --write --log-level error {staged_files}
    lint:
      glob: '*.{js,jsx,ts,tsx}'
      run: npx eslint {staged_files} --fix