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.
This commit is contained in:
Steven
GitHub
parent
48375e492b
commit
a0856eb596
5 changed files with 13 additions and 7 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
Loading…
Reference in a new issue