From a0856eb596ea1fbcf7ec3741e157a3896cd1c94a Mon Sep 17 00:00:00 2001 From: Steven Date: Mon, 24 Jul 2023 18:33:12 -0400 Subject: [PATCH] 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. --- .../02-api-reference/01-components/image-legacy.mdx | 2 +- errors/install-sharp.mdx | 8 +++++++- errors/sharp-version-avif.mdx | 4 ++-- packages/next/src/server/image-optimizer.ts | 4 ++-- test/integration/image-optimizer/test/util.ts | 2 +- 5 files changed, 13 insertions(+), 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 index e5ebda27fc..bee9435c80 100644 --- 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 index 2991836216..16bed8574e 100644 --- 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 index 0e30e6a25a..ba77a84c7d 100644 --- 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 index 2d58841bcb..07c96d68c3 100644 --- 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 index 1be386e902..fafdb376f4 100644 --- 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()