chore: update warning message from yarn add sharp to npm i sharp (#…

…53130) Previously, this warning message assumed the user knew what `yarn` was and had it installed. This PR changes the warning message to assume the user knows what `npm` is and has it installed, since `npm` ships with the official `node` installation.
vercel · Jul 24, 2023 · a0856eb · a0856eb
1 parent 48375e4
commit a0856eb
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git a/docs/03-pages/02-api-reference/01-components/image-legacy.mdx b/docs/03-pages/02-api-reference/01-components/image-legacy.mdx
@@ -440,7 +440,7 @@ If you need a different provider, you can use the [`loader`](#loader) prop with
 
 > Images can not be optimized at build time using [`output: 'export'`](/docs/pages/building-your-application/deploying/static-exports), only on-demand. To use `next/legacy/image` with `output: 'export'`, you will need to use a different loader than the default. [Read more in the discussion.](https://github.com/vercel/next.js/discussions/19065)
 
-> The `next/legacy/image` component's default loader uses [`squoosh`](https://www.npmjs.com/package/@squoosh/lib) because it is quick to install and suitable for a development environment. When using `next start` in your production environment, it is strongly recommended that you install [`sharp`](https://www.npmjs.com/package/sharp) by running `yarn add sharp` in your project directory. This is not necessary for Vercel deployments, as `sharp` is installed automatically.
+> The `next/legacy/image` component's default loader uses [`squoosh`](https://www.npmjs.com/package/@squoosh/lib) because it is quick to install and suitable for a development environment. When using `next start` in your production environment, it is strongly recommended that you install [`sharp`](https://www.npmjs.com/package/sharp) by running `npm i sharp` in your project directory. This is not necessary for Vercel deployments, as `sharp` is installed automatically.
 
 ## Advanced
 

diff --git a/errors/install-sharp.mdx b/errors/install-sharp.mdx
@@ -14,10 +14,16 @@ Option 1: Use a different version of Node.js and try to install `sharp` again.
 
 ```bash filename="Terminal"
 npm i sharp
-# or
+```
+
+```bash filename="Terminal"
 yarn add sharp
 ```
 
+```bash filename="Terminal"
+pnpm add sharp
+```
+
 Option 2: If using macOS, ensure XCode Build Tools are installed and try to install `sharp` again.
 
 For example, see [macOS Catalina instructions](https://github.com/nodejs/node-gyp/blob/66c0f0446749caa591ad841cd029b6d5b5c8da42/macOS_Catalina.md).

diff --git a/errors/sharp-version-avif.mdx b/errors/sharp-version-avif.mdx
@@ -12,8 +12,8 @@ AVIF support was added to [`sharp`](https://www.npmjs.com/package/sharp) in vers
 
 ## Possible Ways to Fix It
 
-- Install the latest version of `sharp` by running `yarn add sharp@latest` in your project directory
-- If you're using the `NEXT_SHARP_PATH` environment variable, then update the `sharp` install referenced in that path, for example `cd "$NEXT_SHARP_PATH/../" && yarn add sharp@latest`
+- Install the latest version of `sharp` by running `npm i sharp@latest` in your project directory
+- If you're using the `NEXT_SHARP_PATH` environment variable, then update the `sharp` install referenced in that path, for example `cd "$NEXT_SHARP_PATH/../" && npm i sharp@latest`
 - If you cannot upgrade `sharp`, you can instead disable AVIF by configuring [`formats`](/docs/pages/api-reference/components/image#formats) in your `next.config.js`
 
 After choosing an option above, reboot the server by running either `next dev` or `next start` for development or production respectively.

diff --git a/packages/next/src/server/image-optimizer.ts b/packages/next/src/server/image-optimizer.ts
@@ -440,7 +440,7 @@ export async function optimizeImage({
       } else {
         console.warn(
           chalk.yellow.bold('Warning: ') +
-            `Your installed version of the 'sharp' package does not support AVIF images. Run 'yarn add sharp@latest' to upgrade to the latest version.\n` +
+            `Your installed version of the 'sharp' package does not support AVIF images. Run 'npm i sharp@latest' to upgrade to the latest version.\n` +
             'Read more: https://nextjs.org/docs/messages/sharp-version-avif'
         )
         transformer.webp({ quality })
@@ -466,7 +466,7 @@ export async function optimizeImage({
     if (showSharpMissingWarning) {
       console.warn(
         chalk.yellow.bold('Warning: ') +
-          `For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp', and Next.js will use it automatically for Image Optimization.\n` +
+          `For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.\n` +
           'Read more: https://nextjs.org/docs/messages/sharp-missing-in-production'
       )
       showSharpMissingWarning = false

diff --git a/test/integration/image-optimizer/test/util.ts b/test/integration/image-optimizer/test/util.ts
@@ -19,7 +19,7 @@ import type { RequestInit } from 'node-fetch'
 
 const largeSize = 1080 // defaults defined in server/config.ts
 const sharpMissingText = `For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended`
-const sharpOutdatedText = `Your installed version of the 'sharp' package does not support AVIF images. Run 'yarn add sharp@latest' to upgrade to the latest version`
+const sharpOutdatedText = `Your installed version of the 'sharp' package does not support AVIF images. Run 'npm i sharp@latest' to upgrade to the latest version`
 
 export async function serveSlowImage() {
   const port = await findPort()