From 0e52759f075a42884a07012009586caf8f15fce6 Mon Sep 17 00:00:00 2001 From: shuta13 Date: Wed, 10 Apr 2024 12:44:14 +0900 Subject: [PATCH 1/3] fix: move sharp into optional deps --- code/frameworks/nextjs/package.json | 4 +- .../nextjs/src/next-image-loader-stub.ts | 32 +- code/yarn.lock | 454 ++++++++++-------- 3 files changed, 288 insertions(+), 202 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index b918ba86c2a0..7e3f13934fb6 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -114,7 +114,6 @@ "resolve-url-loader": "^5.0.0", "sass-loader": "^12.4.0", "semver": "^7.3.5", - "sharp": "^0.32.6", "style-loader": "^3.3.1", "styled-jsx": "5.1.1", "ts-dedent": "^2.0.0", @@ -132,6 +131,9 @@ "typescript": "^5.3.2", "webpack": "^5.65.0" }, + "optionalDependencies": { + "sharp": "^0.33.3" + }, "peerDependencies": { "next": "^13.5.0 || ^14.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/frameworks/nextjs/src/next-image-loader-stub.ts b/code/frameworks/nextjs/src/next-image-loader-stub.ts index 6f69e8e274d3..464b03797dc0 100644 --- a/code/frameworks/nextjs/src/next-image-loader-stub.ts +++ b/code/frameworks/nextjs/src/next-image-loader-stub.ts @@ -2,7 +2,6 @@ import { interpolateName } from 'loader-utils'; import imageSizeOf from 'image-size'; import type { RawLoaderDefinition } from 'webpack'; import type { NextConfig } from 'next'; -import sharp from 'sharp'; import { cpus } from 'os'; interface LoaderOptions { @@ -10,10 +9,19 @@ interface LoaderOptions { nextConfig: NextConfig; } -if (sharp.concurrency() > 1) { - // Reducing concurrency reduces the memory usage too. - const divisor = process.env.NODE_ENV === 'development' ? 4 : 2; - sharp.concurrency(Math.floor(Math.max(cpus().length / divisor, 1))); +let sharp: typeof import('sharp') | undefined; + +try { + sharp = require('sharp'); + if (sharp && sharp.concurrency() > 1) { + // Reducing concurrency reduces the memory usage too. + const divisor = process.env.NODE_ENV === 'development' ? 4 : 2; + sharp.concurrency(Math.floor(Math.max(cpus().length / divisor, 1))); + } +} catch (e) { + console.warn( + 'You have to install sharp in order to use image optimization features in Next.js. AVIF support is also disabled.' + ); } const nextImageLoaderStub: RawLoaderDefinition = async function NextImageLoader( @@ -37,10 +45,16 @@ const nextImageLoaderStub: RawLoaderDefinition = async function N let height; if (extension === 'avif') { - const transformer = sharp(content); - const result = await transformer.metadata(); - width = result.width; - height = result.height; + if (sharp) { + const transformer = sharp(content); + const result = await transformer.metadata(); + width = result.width; + height = result.height; + } else { + throw new Error( + 'You have to install sharp in order to use image optimization features in Next.js.' + ); + } } else { const result = imageSizeOf(this.resourcePath); width = result.width; diff --git a/code/yarn.lock b/code/yarn.lock index 7be8a5f1fd96..831b37de985a 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2213,6 +2213,15 @@ __metadata: languageName: node linkType: hard +"@emnapi/runtime@npm:^1.1.0": + version: 1.1.1 + resolution: "@emnapi/runtime@npm:1.1.1" + dependencies: + tslib: "npm:^2.4.0" + checksum: 10c0/c11ee57abf0ec643e64ccdace4b4fcc0b0c7b1117a191f969e84ae3669841aa90d2c17fa35b73f5a66fc0c843c8caca7bf11187faaeaa526bcfb7dbfb9b85de9 + languageName: node + linkType: hard + "@emotion/babel-plugin@npm:^11.11.0": version: 11.11.0 resolution: "@emotion/babel-plugin@npm:11.11.0" @@ -3143,6 +3152,181 @@ __metadata: languageName: node linkType: hard +"@img/sharp-darwin-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-darwin-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-darwin-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-darwin-arm64": + optional: true + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-darwin-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-darwin-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-darwin-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-darwin-x64": + optional: true + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.2" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.2" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-arm@npm:1.0.2" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-s390x@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.2" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-x64@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linux-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-arm@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-arm@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-arm": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-arm": + optional: true + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-s390x@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-s390x@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-s390x": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-s390x": + optional: true + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linuxmusl-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-wasm32@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-wasm32@npm:0.33.3" + dependencies: + "@emnapi/runtime": "npm:^1.1.0" + conditions: cpu=wasm32 + languageName: node + linkType: hard + +"@img/sharp-win32-ia32@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-win32-ia32@npm:0.33.3" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@img/sharp-win32-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-win32-x64@npm:0.33.3" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -5971,7 +6155,7 @@ __metadata: resolve-url-loader: "npm:^5.0.0" sass-loader: "npm:^12.4.0" semver: "npm:^7.3.5" - sharp: "npm:^0.32.6" + sharp: "npm:^0.33.3" style-loader: "npm:^3.3.1" styled-jsx: "npm:5.1.1" ts-dedent: "npm:^2.0.0" @@ -5984,6 +6168,9 @@ __metadata: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 webpack: ^5.0.0 + dependenciesMeta: + sharp: + optional: true peerDependenciesMeta: typescript: optional: true @@ -10000,13 +10187,6 @@ __metadata: languageName: node linkType: hard -"b4a@npm:^1.6.4": - version: 1.6.4 - resolution: "b4a@npm:1.6.4" - checksum: 10c0/a0af707430c3643fd8d9418c732849d3626f1c9281489e021fcad969fb4808fb9f67b224de36b59c9c3b5a13d853482fee0c0eb53f7aec12d540fa67f63648b6 - languageName: node - linkType: hard - "babel-core@npm:^7.0.0-bridge.0": version: 7.0.0-bridge.0 resolution: "babel-core@npm:7.0.0-bridge.0" @@ -12522,13 +12702,6 @@ __metadata: languageName: node linkType: hard -"deep-extend@npm:^0.6.0": - version: 0.6.0 - resolution: "deep-extend@npm:0.6.0" - checksum: 10c0/1c6b0abcdb901e13a44c7d699116d3d4279fdb261983122a3783e7273844d5f2537dc2e1c454a23fcf645917f93fbf8d07101c1d03c015a87faa662755212566 - languageName: node - linkType: hard - "deep-is@npm:^0.1.3": version: 0.1.4 resolution: "deep-is@npm:0.1.4" @@ -12745,10 +12918,10 @@ __metadata: languageName: node linkType: hard -"detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.2": - version: 2.0.2 - resolution: "detect-libc@npm:2.0.2" - checksum: 10c0/a9f4ffcd2701525c589617d98afe5a5d0676c8ea82bcc4ed6f3747241b79f781d36437c59a5e855254c864d36a3e9f8276568b6b531c28d6e53b093a15703f11 +"detect-libc@npm:^2.0.3": + version: 2.0.3 + resolution: "detect-libc@npm:2.0.3" + checksum: 10c0/88095bda8f90220c95f162bf92cad70bd0e424913e655c20578600e35b91edc261af27531cf160a331e185c0ced93944bc7e09939143225f56312d7fd800fdb7 languageName: node linkType: hard @@ -14571,13 +14744,6 @@ __metadata: languageName: node linkType: hard -"expand-template@npm:^2.0.3": - version: 2.0.3 - resolution: "expand-template@npm:2.0.3" - checksum: 10c0/1c9e7afe9acadf9d373301d27f6a47b34e89b3391b1ef38b7471d381812537ef2457e620ae7f819d2642ce9c43b189b3583813ec395e2938319abe356a9b2f51 - languageName: node - linkType: hard - "expand-tilde@npm:^2.0.2": version: 2.0.2 resolution: "expand-tilde@npm:2.0.2" @@ -14707,13 +14873,6 @@ __metadata: languageName: node linkType: hard -"fast-fifo@npm:^1.1.0, fast-fifo@npm:^1.2.0": - version: 1.3.2 - resolution: "fast-fifo@npm:1.3.2" - checksum: 10c0/d53f6f786875e8b0529f784b59b4b05d4b5c31c651710496440006a398389a579c8dbcd2081311478b5bf77f4b0b21de69109c5a4eabea9d8e8783d1eb864e4c - languageName: node - linkType: hard - "fast-glob@npm:3.2.7": version: 3.2.7 resolution: "fast-glob@npm:3.2.7" @@ -15764,13 +15923,6 @@ __metadata: languageName: node linkType: hard -"github-from-package@npm:0.0.0": - version: 0.0.0 - resolution: "github-from-package@npm:0.0.0" - checksum: 10c0/737ee3f52d0a27e26332cde85b533c21fcdc0b09fb716c3f8e522cfaa9c600d4a631dec9fcde179ec9d47cca89017b7848ed4d6ae6b6b78f936c06825b1fcc12 - languageName: node - linkType: hard - "github-release-from-changelog@npm:^2.1.1": version: 2.1.1 resolution: "github-release-from-changelog@npm:2.1.1" @@ -17011,7 +17163,7 @@ __metadata: languageName: node linkType: hard -"ini@npm:^1.3.4, ini@npm:^1.3.5, ini@npm:~1.3.0": +"ini@npm:^1.3.4, ini@npm:^1.3.5": version: 1.3.8 resolution: "ini@npm:1.3.8" checksum: 10c0/ec93838d2328b619532e4f1ff05df7909760b6f66d9c9e2ded11e5c1897d6f2f9980c54dd638f88654b00919ce31e827040631eab0a3969e4d1abefa0719516a @@ -20555,7 +20707,7 @@ __metadata: languageName: node linkType: hard -"minimist@npm:^1.0.0, minimist@npm:^1.2.0, minimist@npm:^1.2.3, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.8": +"minimist@npm:^1.0.0, minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.8": version: 1.2.8 resolution: "minimist@npm:1.2.8" checksum: 10c0/19d3fcdca050087b84c2029841a093691a91259a47def2f18222f41e7645a0b7c44ef4b40e88a1e58a40c84d2ef0ee6047c55594d298146d0eb3f6b737c20ce6 @@ -20690,7 +20842,7 @@ __metadata: languageName: node linkType: hard -"mkdirp-classic@npm:^0.5.2, mkdirp-classic@npm:^0.5.3": +"mkdirp-classic@npm:^0.5.2": version: 0.5.3 resolution: "mkdirp-classic@npm:0.5.3" checksum: 10c0/95371d831d196960ddc3833cc6907e6b8f67ac5501a6582f47dfae5eb0f092e9f8ce88e0d83afcae95d6e2b61a01741ba03714eeafb6f7a6e9dcc158ac85b168 @@ -20871,13 +21023,6 @@ __metadata: languageName: node linkType: hard -"napi-build-utils@npm:^1.0.1": - version: 1.0.2 - resolution: "napi-build-utils@npm:1.0.2" - checksum: 10c0/37fd2cd0ff2ad20073ce78d83fd718a740d568b225924e753ae51cb69d68f330c80544d487e5e5bd18e28702ed2ca469c2424ad948becd1862c1b0209542b2e9 - languageName: node - linkType: hard - "natural-compare@npm:^1.4.0": version: 1.4.0 resolution: "natural-compare@npm:1.4.0" @@ -20995,15 +21140,6 @@ __metadata: languageName: node linkType: hard -"node-abi@npm:^3.3.0": - version: 3.51.0 - resolution: "node-abi@npm:3.51.0" - dependencies: - semver: "npm:^7.3.5" - checksum: 10c0/2f0a56a9923bd21ff13650b6e8d2caebda211795761b40ae0ec3ea08e6687f6722535302cde87c928d6959a6afec196db3c54f8ae2db0bbaa401459dcf0f073c - languageName: node - linkType: hard - "node-abort-controller@npm:^3.0.1": version: 3.1.1 resolution: "node-abort-controller@npm:3.1.1" @@ -21020,15 +21156,6 @@ __metadata: languageName: node linkType: hard -"node-addon-api@npm:^6.1.0": - version: 6.1.0 - resolution: "node-addon-api@npm:6.1.0" - dependencies: - node-gyp: "npm:latest" - checksum: 10c0/d2699c4ad15740fd31482a3b6fca789af7723ab9d393adc6ac45250faaee72edad8f0b10b2b9d087df0de93f1bdc16d97afdd179b26b9ebc9ed68b569faa4bac - languageName: node - linkType: hard - "node-cleanup@npm:^2.1.2": version: 2.1.2 resolution: "node-cleanup@npm:2.1.2" @@ -22859,28 +22986,6 @@ __metadata: languageName: node linkType: hard -"prebuild-install@npm:^7.1.1": - version: 7.1.1 - resolution: "prebuild-install@npm:7.1.1" - dependencies: - detect-libc: "npm:^2.0.0" - expand-template: "npm:^2.0.3" - github-from-package: "npm:0.0.0" - minimist: "npm:^1.2.3" - mkdirp-classic: "npm:^0.5.3" - napi-build-utils: "npm:^1.0.1" - node-abi: "npm:^3.3.0" - pump: "npm:^3.0.0" - rc: "npm:^1.2.7" - simple-get: "npm:^4.0.0" - tar-fs: "npm:^2.0.0" - tunnel-agent: "npm:^0.6.0" - bin: - prebuild-install: bin.js - checksum: 10c0/6dc70f36b0f4adcb2fe0ed38d874ab28b571fb1a9725d769e8ba3f64a15831e58462de09f3e6e64569bcc4a3e03b9328b56faa0d45fe10ae1574478814536c76 - languageName: node - linkType: hard - "prelude-ls@npm:^1.2.1": version: 1.2.1 resolution: "prelude-ls@npm:1.2.1" @@ -23386,13 +23491,6 @@ __metadata: languageName: node linkType: hard -"queue-tick@npm:^1.0.1": - version: 1.0.1 - resolution: "queue-tick@npm:1.0.1" - checksum: 10c0/0db998e2c9b15215317dbcf801e9b23e6bcde4044e115155dae34f8e7454b9a783f737c9a725528d677b7a66c775eb7a955cf144fe0b87f62b575ce5bfd515a9 - languageName: node - linkType: hard - "queue@npm:6.0.2": version: 6.0.2 resolution: "queue@npm:6.0.2" @@ -23474,20 +23572,6 @@ __metadata: languageName: node linkType: hard -"rc@npm:^1.2.7": - version: 1.2.8 - resolution: "rc@npm:1.2.8" - dependencies: - deep-extend: "npm:^0.6.0" - ini: "npm:~1.3.0" - minimist: "npm:^1.2.0" - strip-json-comments: "npm:~2.0.1" - bin: - rc: ./cli.js - checksum: 10c0/24a07653150f0d9ac7168e52943cc3cb4b7a22c0e43c7dff3219977c2fdca5a2760a304a029c20811a0e79d351f57d46c9bde216193a0f73978496afc2b85b15 - languageName: node - linkType: hard - "react-colorful@npm:^5.1.2": version: 5.6.1 resolution: "react-colorful@npm:5.6.1" @@ -25306,7 +25390,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:7.6.0, semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4": +"semver@npm:7.6.0, semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0": version: 7.6.0 resolution: "semver@npm:7.6.0" dependencies: @@ -25477,20 +25561,72 @@ __metadata: languageName: node linkType: hard -"sharp@npm:^0.32.6": - version: 0.32.6 - resolution: "sharp@npm:0.32.6" - dependencies: +"sharp@npm:^0.33.3": + version: 0.33.3 + resolution: "sharp@npm:0.33.3" + dependencies: + "@img/sharp-darwin-arm64": "npm:0.33.3" + "@img/sharp-darwin-x64": "npm:0.33.3" + "@img/sharp-libvips-darwin-arm64": "npm:1.0.2" + "@img/sharp-libvips-darwin-x64": "npm:1.0.2" + "@img/sharp-libvips-linux-arm": "npm:1.0.2" + "@img/sharp-libvips-linux-arm64": "npm:1.0.2" + "@img/sharp-libvips-linux-s390x": "npm:1.0.2" + "@img/sharp-libvips-linux-x64": "npm:1.0.2" + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2" + "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2" + "@img/sharp-linux-arm": "npm:0.33.3" + "@img/sharp-linux-arm64": "npm:0.33.3" + "@img/sharp-linux-s390x": "npm:0.33.3" + "@img/sharp-linux-x64": "npm:0.33.3" + "@img/sharp-linuxmusl-arm64": "npm:0.33.3" + "@img/sharp-linuxmusl-x64": "npm:0.33.3" + "@img/sharp-wasm32": "npm:0.33.3" + "@img/sharp-win32-ia32": "npm:0.33.3" + "@img/sharp-win32-x64": "npm:0.33.3" color: "npm:^4.2.3" - detect-libc: "npm:^2.0.2" - node-addon-api: "npm:^6.1.0" - node-gyp: "npm:latest" - prebuild-install: "npm:^7.1.1" - semver: "npm:^7.5.4" - simple-get: "npm:^4.0.1" - tar-fs: "npm:^3.0.4" - tunnel-agent: "npm:^0.6.0" - checksum: 10c0/f6a756fec5051ef2f9341e0543cde1da4e822982dd5398010baad92e2262bd177e08b753eb19b2fbee30f2fcb0e8756f24088fafc48293a364e9a8f8dc65a300 + detect-libc: "npm:^2.0.3" + semver: "npm:^7.6.0" + dependenciesMeta: + "@img/sharp-darwin-arm64": + optional: true + "@img/sharp-darwin-x64": + optional: true + "@img/sharp-libvips-darwin-arm64": + optional: true + "@img/sharp-libvips-darwin-x64": + optional: true + "@img/sharp-libvips-linux-arm": + optional: true + "@img/sharp-libvips-linux-arm64": + optional: true + "@img/sharp-libvips-linux-s390x": + optional: true + "@img/sharp-libvips-linux-x64": + optional: true + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + "@img/sharp-libvips-linuxmusl-x64": + optional: true + "@img/sharp-linux-arm": + optional: true + "@img/sharp-linux-arm64": + optional: true + "@img/sharp-linux-s390x": + optional: true + "@img/sharp-linux-x64": + optional: true + "@img/sharp-linuxmusl-arm64": + optional: true + "@img/sharp-linuxmusl-x64": + optional: true + "@img/sharp-wasm32": + optional: true + "@img/sharp-win32-ia32": + optional: true + "@img/sharp-win32-x64": + optional: true + checksum: 10c0/12f5203426595b4e64c807162a6d52358b591d25fbb414a51fe38861584759fba38485be951ed98d15be3dfe21f2def5336f78ca35bf8bbd22d88cc78ca03f2a languageName: node linkType: hard @@ -25588,24 +25724,6 @@ __metadata: languageName: node linkType: hard -"simple-concat@npm:^1.0.0": - version: 1.0.1 - resolution: "simple-concat@npm:1.0.1" - checksum: 10c0/62f7508e674414008910b5397c1811941d457dfa0db4fd5aa7fa0409eb02c3609608dfcd7508cace75b3a0bf67a2a77990711e32cd213d2c76f4fd12ee86d776 - languageName: node - linkType: hard - -"simple-get@npm:^4.0.0, simple-get@npm:^4.0.1": - version: 4.0.1 - resolution: "simple-get@npm:4.0.1" - dependencies: - decompress-response: "npm:^6.0.0" - once: "npm:^1.3.1" - simple-concat: "npm:^1.0.0" - checksum: 10c0/b0649a581dbca741babb960423248899203165769747142033479a7dc5e77d7b0fced0253c731cd57cf21e31e4d77c9157c3069f4448d558ebc96cf9e1eebcf0 - languageName: node - linkType: hard - "simple-swizzle@npm:^0.2.2": version: 0.2.2 resolution: "simple-swizzle@npm:0.2.2" @@ -26157,16 +26275,6 @@ __metadata: languageName: node linkType: hard -"streamx@npm:^2.15.0": - version: 2.15.1 - resolution: "streamx@npm:2.15.1" - dependencies: - fast-fifo: "npm:^1.1.0" - queue-tick: "npm:^1.0.1" - checksum: 10c0/e3b0e997726a2a499e1069efea7d720e54fc262011dfcb32e6704f90b5a31bb55b8f48964649d787be03d8718dcf9aa413d24ce48823d92fcbad06a3c337ec61 - languageName: node - linkType: hard - "strict-uri-encode@npm:^2.0.0": version: 2.0.0 resolution: "strict-uri-encode@npm:2.0.0" @@ -26397,13 +26505,6 @@ __metadata: languageName: node linkType: hard -"strip-json-comments@npm:~2.0.1": - version: 2.0.1 - resolution: "strip-json-comments@npm:2.0.1" - checksum: 10c0/b509231cbdee45064ff4f9fd73609e2bcc4e84a4d508e9dd0f31f70356473fde18abfb5838c17d56fb236f5a06b102ef115438de0600b749e818a35fbbc48c43 - languageName: node - linkType: hard - "strip-literal@npm:^1.3.0": version: 1.3.0 resolution: "strip-literal@npm:1.3.0" @@ -26751,7 +26852,7 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^2.0.0, tar-fs@npm:^2.1.1": +"tar-fs@npm:^2.1.1": version: 2.1.1 resolution: "tar-fs@npm:2.1.1" dependencies: @@ -26763,17 +26864,6 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^3.0.4": - version: 3.0.4 - resolution: "tar-fs@npm:3.0.4" - dependencies: - mkdirp-classic: "npm:^0.5.2" - pump: "npm:^3.0.0" - tar-stream: "npm:^3.1.5" - checksum: 10c0/120f026d891e5b4f7147a5ae5816e3a9b7f2c5b4ca61714dab3fe1244961607dccca40c11cafc584e625838c57d1308da5bb28b13d70b85ab566bc4c9f1c88b1 - languageName: node - linkType: hard - "tar-stream@npm:^2.1.4, tar-stream@npm:~2.2.0": version: 2.2.0 resolution: "tar-stream@npm:2.2.0" @@ -26787,17 +26877,6 @@ __metadata: languageName: node linkType: hard -"tar-stream@npm:^3.1.5": - version: 3.1.6 - resolution: "tar-stream@npm:3.1.6" - dependencies: - b4a: "npm:^1.6.4" - fast-fifo: "npm:^1.2.0" - streamx: "npm:^2.15.0" - checksum: 10c0/7d52d1a56eb25b8434c9544becb737eb6c4f0ed19d205e739fdd2537ad8d1d623a6c93f7f8e58d9028cb0cdf86c0d8b67164e070cd1702cc78b8ab7cba0f3702 - languageName: node - linkType: hard - "tar@npm:^6.1.11, tar@npm:^6.1.2, tar@npm:^6.2.0": version: 6.2.0 resolution: "tar@npm:6.2.0" @@ -27410,15 +27489,6 @@ __metadata: languageName: node linkType: hard -"tunnel-agent@npm:^0.6.0": - version: 0.6.0 - resolution: "tunnel-agent@npm:0.6.0" - dependencies: - safe-buffer: "npm:^5.0.1" - checksum: 10c0/4c7a1b813e7beae66fdbf567a65ec6d46313643753d0beefb3c7973d66fcec3a1e7f39759f0a0b4465883499c6dc8b0750ab8b287399af2e583823e40410a17a - languageName: node - linkType: hard - "tween-functions@npm:^1.2.0": version: 1.2.0 resolution: "tween-functions@npm:1.2.0" From 7eec06e1e7539e2becdeded2d7474357ddeaa622 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 10 Apr 2024 13:12:51 +0200 Subject: [PATCH 2/3] Use error framework --- .../nextjs/src/next-image-loader-stub.ts | 5 ++--- .../core-events/src/errors/preview-errors.ts | 17 +++++++++++++++++ 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/code/frameworks/nextjs/src/next-image-loader-stub.ts b/code/frameworks/nextjs/src/next-image-loader-stub.ts index 464b03797dc0..dbc65b8fde63 100644 --- a/code/frameworks/nextjs/src/next-image-loader-stub.ts +++ b/code/frameworks/nextjs/src/next-image-loader-stub.ts @@ -3,6 +3,7 @@ import imageSizeOf from 'image-size'; import type { RawLoaderDefinition } from 'webpack'; import type { NextConfig } from 'next'; import { cpus } from 'os'; +import { NextJsSharpError } from '@storybook/core-events/preview-errors'; interface LoaderOptions { filename: string; @@ -51,9 +52,7 @@ const nextImageLoaderStub: RawLoaderDefinition = async function N width = result.width; height = result.height; } else { - throw new Error( - 'You have to install sharp in order to use image optimization features in Next.js.' - ); + throw new NextJsSharpError(); } } else { const result = imageSizeOf(this.resourcePath); diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts index fb33c42688b3..218db70ef826 100644 --- a/code/lib/core-events/src/errors/preview-errors.ts +++ b/code/lib/core-events/src/errors/preview-errors.ts @@ -27,6 +27,7 @@ export enum Category { RENDERER_VUE = 'RENDERER_VUE', RENDERER_VUE3 = 'RENDERER_VUE3', RENDERER_WEB_COMPONENTS = 'RENDERER_WEB-COMPONENTS', + FRAMEWORK_NEXTJS = 'FRAMEWORK_NEXTJS', } export class MissingStoryAfterHmrError extends StorybookError { @@ -235,3 +236,19 @@ export class StoryStoreAccessedBeforeInitializationError extends StorybookError remove access to the store entirely`; } } + +export class NextJsSharpError extends StorybookError { + readonly category = Category.FRAMEWORK_NEXTJS; + + readonly code = 1; + + readonly documentation = 'https://storybook.js.org/docs/get-started/nextjs#faq'; + + template() { + return dedent` + You are importing avif images, but you don't have sharp installed. + + You have to install sharp in order to use image optimization features in Next.js. + `; + } +} From 3eaacff2aeef09fb38fc12d3d886b50d8ee18cab Mon Sep 17 00:00:00 2001 From: shuta13 Date: Thu, 11 Apr 2024 11:46:00 +0900 Subject: [PATCH 3/3] docs: add the part of resolving sharp errors --- docs/get-started/nextjs.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docs/get-started/nextjs.md b/docs/get-started/nextjs.md index 6cbd4ac91177..b17cf19661b3 100644 --- a/docs/get-started/nextjs.md +++ b/docs/get-started/nextjs.md @@ -865,6 +865,24 @@ You might get this if you're using Yarn v2 or v3. See [Notes for Yarn v2 and v3 The `@storybook/nextjs` package abstracts the Webpack 5 builder and provides all the necessary Webpack configuration needed (and used internally) by Next.js. Webpack is currently the official builder in Next.js, and Next.js does not support Vite, therefore it is not possible to use Vite with `@storybook/nextjs`. You can use `@storybook/react-vite` framework instead, but at the cost of having a degraded experience, and we won't be able to provide you official support. +### Error: You are importing avif images, but you don't have sharp installed. You have to install sharp in order to use image optimization features in Next.js. + +`sharp` is a dependency of Next.js's image optimization feature. If you see this error, you need to install `sharp` in your project. + +```bash +npm install sharp +``` + +```bash +yarn add sharp +``` + +```bash +pnpm add sharp +``` + +You can refer to the [Install `sharp` to Use Built-In Image Optimization](https://nextjs.org/docs/messages/install-sharp) in the Next.js documentation for more information. + ## API ### Parameters