From 06211cf25107f44b65ac805913c68491dfd22cee Mon Sep 17 00:00:00 2001 From: Steven Date: Tue, 24 Aug 2021 17:33:17 -0400 Subject: [PATCH 1/4] Update docs for `sharp` usage to mention Vercel --- docs/basic-features/image-optimization.md | 2 +- errors/sharp-missing-in-production.md | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md index ee8a6ad7e3171..82275054e8275 100644 --- a/docs/basic-features/image-optimization.md +++ b/docs/basic-features/image-optimization.md @@ -128,7 +128,7 @@ If you need a different provider, you can use the [`loader`](/docs/api-reference > The `next/image` component's default loader is not supported when using [`next export`](/docs/advanced-features/static-html-export.md). However, other loader options will work. -> The `next/image` component's default loader uses the ['squoosh'](https://www.npmjs.com/package/@squoosh/lib) library for image resizing and optimization. This library is quick to install and suitable for a dev server environment. For a production environment, it is strongly recommended that you install the optional [`sharp`](https://www.npmjs.com/package/sharp) library by running `yarn add sharp` in your project directory. If sharp is already installed but can't be resolved you can manually pass the path to it via the `NEXT_SHARP_PATH` environment variable e.g. `NEXT_SHARP_PATH=/tmp/node_modules/sharp` +> The `next/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. ## Caching diff --git a/errors/sharp-missing-in-production.md b/errors/sharp-missing-in-production.md index 01fc602b4b4e3..cc2855ee0f1da 100644 --- a/errors/sharp-missing-in-production.md +++ b/errors/sharp-missing-in-production.md @@ -2,11 +2,16 @@ #### Why This Error Occurred -The `next/image` component's default loader uses the ['squoosh'](https://www.npmjs.com/package/@squoosh/lib) library for image resizing and optimization. This library is quick to install and suitable for a dev server environment. For a production environment, it is strongly recommended that you install the optional [`sharp`](https://www.npmjs.com/package/sharp). This package was not detected when leveraging the Image Optimization in production mode (`next start`). +The `next/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. For a production environment using `next start`, it is strongly recommended that you install [`sharp`](https://www.npmjs.com/package/sharp) by running `yarn add sharp` in your project directory. + +You are seeing this error because Image Optimization in production mode (`next start`) was detected. #### Possible Ways to Fix It -Install `sharp` by running `yarn add sharp` in your project directory. +- Install `sharp` by running `yarn add sharp` in your project directory and then reboot the server by running `next start` again +- If `sharp` is already installed but can't be resolved, set the `NEXT_SHARP_PATH` environment variable such as `NEXT_SHARP_PATH=/tmp/node_modules/sharp next start` + +> Note: This is not necessary for Vercel deployments. ### Useful Links From 4fc888d1211367fedd4f3d5fddb685b9b44942d6 Mon Sep 17 00:00:00 2001 From: Steven Date: Tue, 24 Aug 2021 18:03:32 -0400 Subject: [PATCH 2/4] Clarify Vercel automatically installs --- errors/sharp-missing-in-production.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/errors/sharp-missing-in-production.md b/errors/sharp-missing-in-production.md index cc2855ee0f1da..161064f3991c0 100644 --- a/errors/sharp-missing-in-production.md +++ b/errors/sharp-missing-in-production.md @@ -11,7 +11,7 @@ You are seeing this error because Image Optimization in production mode (`next s - Install `sharp` by running `yarn add sharp` in your project directory and then reboot the server by running `next start` again - If `sharp` is already installed but can't be resolved, set the `NEXT_SHARP_PATH` environment variable such as `NEXT_SHARP_PATH=/tmp/node_modules/sharp next start` -> Note: This is not necessary for Vercel deployments. +> Note: This is not necessary for Vercel deployments, since `sharp` is installed automatically for you. ### Useful Links From aa158b63c8c7c89565d224ca9e412559b0e26e0f Mon Sep 17 00:00:00 2001 From: Steven Date: Tue, 24 Aug 2021 18:05:31 -0400 Subject: [PATCH 3/4] Clarify again --- docs/basic-features/image-optimization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md index 82275054e8275..7c8e28074cd7d 100644 --- a/docs/basic-features/image-optimization.md +++ b/docs/basic-features/image-optimization.md @@ -128,7 +128,7 @@ If you need a different provider, you can use the [`loader`](/docs/api-reference > The `next/image` component's default loader is not supported when using [`next export`](/docs/advanced-features/static-html-export.md). However, other loader options will work. -> The `next/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. +> The `next/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. ## Caching From b2444a5098c04ee724baf13cf55b462f42f30180 Mon Sep 17 00:00:00 2001 From: Steven Date: Tue, 24 Aug 2021 18:06:20 -0400 Subject: [PATCH 4/4] Remove `that` Co-authored-by: Lee Robinson --- errors/sharp-missing-in-production.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/errors/sharp-missing-in-production.md b/errors/sharp-missing-in-production.md index 161064f3991c0..02face5fc054f 100644 --- a/errors/sharp-missing-in-production.md +++ b/errors/sharp-missing-in-production.md @@ -2,7 +2,7 @@ #### Why This Error Occurred -The `next/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. For a production environment using `next start`, it is strongly recommended that you install [`sharp`](https://www.npmjs.com/package/sharp) by running `yarn add sharp` in your project directory. +The `next/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. For a production environment using `next start`, it is strongly recommended you install [`sharp`](https://www.npmjs.com/package/sharp) by running `yarn add sharp` in your project directory. You are seeing this error because Image Optimization in production mode (`next start`) was detected.