Gutenberg: Prettier not found running lint from @wordpress/scripts

[renatho]

Describe the bug

Error with the prettier dependency while running the lint script from @wordpress/scripts after a new npm install.

To reproduce
Steps to reproduce the behavior:

1. Create a project and add the @wordpress/scripts dev dependency

> mkdir scripts-test \
&& cd scripts-test \
&& npm init -y && npm i -D @wordpress/scripts

1. Add the script to the package.json: "lint:js": "wp-scripts lint-js"
2. Create a js file and run the lint to see it is working.

> echo 'const x = 1;' >index.js \
&& npm run lint:js

1. Checking the prettier dependency in this moment:

> npm ls prettier
[email protected] /Users/renatho/Downloads/scripts-test
└─┬ @wordpress/[email protected]
  ├─┬ @wordpress/[email protected]
  │ └── prettier@npm:[email protected]  deduped
  └── prettier@npm:[email protected]

1. You can make a git init here and commit the package-lock to see the next changes.
2. Remove the node_modules folder, reinstall the packages and run the lint script. The new install will update (unexpectedly) our package-lock.json and It stops to work because it doesn't find the prettier. You will see the error Error: Cannot find module 'prettier'

> rm -rf node_modules \
&& npm i \
&& npm run lint:js

1. Check the prettier dependency to understand what happened (you can also see the package-lock diff):

> npm ls prettier
[email protected] /Users/renatho/Downloads/scripts-test
└─┬ @wordpress/[email protected]
  ├─┬ @wordpress/[email protected]
  │ └── UNMET PEER DEPENDENCY prettier@npm:[email protected] 
  └── prettier@npm:[email protected]

Expected behavior

Install the @wordpress/scripts and after other npm install it continues to work properly while running the npm run lint:js.

Version (please complete the following information):

• A clean project with only the @wordpress/scripts installed. Reproduced in 7.1.3 and 8.0.1

Desktop (please complete the following information):

• OS: macOS Catalina
• NPM 6.14.4 / Node 10.17.0

[gziolo]

It’s a know issue and I don’t think we can help much about it. In my experience running npm install twice resolves it, so it looks like there is something weird happening on the npm side when using aliases. There are two things that might help:

• a troubleshooting section where we describe this issue and propose running npm i again when it happens or installing the aliased Prettier fork as a dependency of the project
• stop using Prettier’s fork but we would have to change the coding guidelines about all the spaces added in the code, Prettier refused to add it as a configurable option

[renatho]

Thank you for your answer with the suggestions @gziolo !!

For now, what we are using as a workaround is to install the prettier fork as a direct dependency. :)

And I tested running the npm i again, but it didn't solve for me :(
For me, after the error happens changing the package-lock, it doesn't work more unless we remove the package-lock to reinstall.

[gziolo]

@renatho thanks for testing and sharing what works for you 👍

[ndiego]

I just ran into this randomly as well. I had been using the lint command with no issues for awhile, and then all the sudden I got the error. If you remove package-lock.json file, delete the node_modules folder and then run npm i again, the error went away for me.