fix: `next/image` usage from `node_modules` #33559

JuniorTour · 2022-01-22T13:07:14Z

	Before Fix #31065	After Fix #31065
Screenshot

Why error?

import next/image form node_modules is var _image = _interopRequireDefault(require('next/image')) not __webpack_require('next/image')
So process.env.__NEXT_IMAGE_OPTS is not replaced by webpack define plugin, just empty object.
SSR will not get the domain config.
Error: Invalid src prop (https://i.imgur.com/CgezKMb.jpg) on next/image, hostname "i.imgur.com" is not configured under images in your next.config.js

Why fix?

Add a runtime obj imageConfigRuntime for import next/image form node_modules will avoid process.env.__NEXT_IMAGE_OPTS is empty.

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

packages/next/client/image.tsx

test/integration/image-component/image-from-node-modules/test/index.test.js

packages/next/client/image.tsx

packages/next/server/render.tsx

packages/next/shared/lib/runtime-image-config-context.ts

fix: renderOpts.image is string fix: cleanup fix: parse error

ijjk · 2022-02-07T17:10:36Z

Failing test suites

Commit: 3ac014a

yarn testheadless test/integration/custom-server/test/index.test.js

Custom Server > HMR with custom server > Should support HMR when rendering with /index pathname

Expand output

● Custom Server › HMR with custom server › Should support HMR when rendering with /index pathname

TIMED OUT: /Asset!!/

undefined

  474 |
  475 |   if (hardError) {
> 476 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  477 |   }
  478 |   return false
  479 | }

  at Object.check (lib/next-test-utils.js:476:11)
  at Object.<anonymous> (integration/custom-server/test/index.test.js:136:9)

Read more about building and testing Next.js in contributing.md.

packages/next/client/image.tsx

styfle

Looks great, thanks! 🎉

JuniorTour · 2022-02-08T16:27:27Z

After resolve conflicts, all test case will pass: JuniorTour#5

Could I update the code to resolve conflicts?

It will reset approval.

styfle · 2022-02-08T22:07:45Z

~~@JuniorTour Yes please do, thanks!~~

Looks like it was easy to resolve so I updated in 9579d99

ijjk · 2022-02-09T00:05:59Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
buildDuration	17.8s	17.5s	-324ms
buildDurationCached	7s	6.9s	-35ms
nodeModulesSize	359 MB	359 MB	⚠️ +3.33 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.711	3.595	-0.12
/ avg req/sec	673.65	695.49	+21.84
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.573	1.505	-0.07
/error-in-render avg req/sec	1589.77	1661.61	+71.84

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	27.5 kB	27.9 kB	⚠️ +355 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.2 kB	71.5 kB	⚠️ +355 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.57 kB	2.57 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	5.01 kB	5.01 kB	-2 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.7 kB	14.7 kB	-2 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
_buildManifest.js gzip	458 B	459 B	⚠️ +1 B
Overall change	458 B	459 B	⚠️ +1 B

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
index.html gzip	531 B	532 B	⚠️ +1 B
link.html gzip	544 B	545 B	⚠️ +1 B
withRouter.html gzip	525 B	526 B	⚠️ +1 B
Overall change	1.6 kB	1.6 kB	⚠️ +3 B

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-9e69c038ec9191f6.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-413844489ba1eb58.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-b932c7479a7c37ca.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -131,6 +131,7 @@
       var _head = _interopRequireDefault(__webpack_require__(5443));
       var _imageConfig = __webpack_require__(5809);
       var _useIntersection = __webpack_require__(7190);
+      var _imageConfigContext = __webpack_require__(9977);
       function _defineProperty1(obj, key, value) {
         if (key in obj) {
           Object.defineProperty(obj, key, {
@@ -225,6 +226,12 @@
         }
         return target;
       }
+      var configEnv = {
+        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+        path: "/_next/image",
+        loader: "default"
+      };
       var loadedImageURLs = new Set();
       var allImgs = new Map();
       var perfObserver;
@@ -263,29 +270,9 @@
           (isStaticRequire(src) || isStaticImageData(src))
         );
       }
-      var ref =
-          {
-            deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-            imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-            path: "/_next/image",
-            loader: "default"
-          } || _imageConfig.imageConfigDefault,
-        configDeviceSizes = ref.deviceSizes,
-        configImageSizes = ref.imageSizes,
-        configLoader = ref.loader,
-        configPath = ref.path,
-        configDomains = ref.domains;
-      // sort smallest to largest
-      var allSizes = _toConsumableArray(configDeviceSizes).concat(
-        _toConsumableArray(configImageSizes)
-      );
-      configDeviceSizes.sort(function(a, b) {
-        return a - b;
-      });
-      allSizes.sort(function(a, b) {
-        return a - b;
-      });
-      function getWidths(width, layout, sizes) {
+      function getWidths(param, width, layout, sizes) {
+        var deviceSizes = param.deviceSizes,
+          allSizes = param.allSizes;
         if (sizes && (layout === "fill" || layout === "responsive")) {
           // Find all the "vw" percent sizes used in the sizes prop
           var viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
@@ -302,7 +289,7 @@
               ) * 0.01;
             return {
               widths: allSizes.filter(function(s) {
-                return s >= configDeviceSizes[0] * smallestRatio;
+                return s >= deviceSizes[0] * smallestRatio;
               }),
               kind: "w"
             };
@@ -318,7 +305,7 @@
           layout === "responsive"
         ) {
           return {
-            widths: configDeviceSizes,
+            widths: deviceSizes,
             kind: "w"
           };
         }
@@ -345,7 +332,8 @@
         };
       }
       function generateImgAttrs(param) {
-        var src = param.src,
+        var config = param.config,
+          src = param.src,
           unoptimized = param.unoptimized,
           layout = param.layout,
           width = param.width,
@@ -359,9 +347,9 @@
             sizes: undefined
           };
         }
-        var ref1 = getWidths(width, layout, sizes),
-          widths = ref1.widths,
-          kind = ref1.kind;
+        var ref = getWidths(config, width, layout, sizes),
+          widths = ref.widths,
+          kind = ref.kind;
         var last = widths.length - 1;
         return {
           sizes: !sizes && kind === "w" ? "100vw" : sizes,
@@ -370,6 +358,7 @@
               return ""
                 .concat(
                   loader({
+                    config: config,
                     src: src,
                     quality: quality,
                     width: w
@@ -387,6 +376,7 @@
           // and `sizes` are defined.
           // This bug cannot be reproduced in Chrome or Firefox.
           src: loader({
+            config: config,
             src: src,
             quality: quality,
             width: widths[last]
@@ -403,21 +393,19 @@
         return undefined;
       }
       function defaultImageLoader(loaderProps) {
-        var load = loaders.get(configLoader);
+        var ref;
+        var loaderKey =
+          ((ref = loaderProps.config) === null || ref === void 0
+            ? void 0
+            : ref.loader) || "default";
+        var load = loaders.get(loaderKey);
         if (load) {
-          return load(
-            _objectSpread(
-              {
-                root: configPath
-              },
-              loaderProps
-            )
-          );
+          return load(loaderProps);
         }
         throw new Error(
           'Unknown "loader" found in "next.config.js". Expected: '
             .concat(_imageConfig.VALID_LOADERS.join(", "), ". Received: ")
-            .concat(configLoader)
+            .concat(loaderKey)
         );
       }
       // See https://stackoverflow.com/q/39777833/266535 for why we use this ref
@@ -458,7 +446,7 @@
                 });
               }
               if (false) {
-                var parent, ref2;
+                var parent, ref;
               }
             });
           }
@@ -518,6 +506,28 @@
             "blurDataURL"
           ]);
         var imgRef = (0, _react).useRef(null);
+        var configContext = (0, _react).useContext(
+          _imageConfigContext.ImageConfigContext
+        );
+        var config = (0, _react).useMemo(
+          function() {
+            var c =
+              configEnv || configContext || _imageConfig.imageConfigDefault;
+            var allSizes = _toConsumableArray(c.deviceSizes)
+              .concat(_toConsumableArray(c.imageSizes))
+              .sort(function(a, b) {
+                return a - b;
+              });
+            var deviceSizes = c.deviceSizes.sort(function(a, b) {
+              return a - b;
+            });
+            return _objectSpread({}, c, {
+              allSizes: allSizes,
+              deviceSizes: deviceSizes
+            });
+          },
+          [configContext]
+        );
         var rest = all;
         var layout = sizes ? "responsive" : "intrinsic";
         if ("layout" in rest) {
@@ -567,7 +577,7 @@
         if (false) {
           var url, urlStr, VALID_BLUR_EXT;
         }
-        var ref3 = _slicedToArray(
+        var ref1 = _slicedToArray(
             (0, _useIntersection).useIntersection({
               rootRef: lazyRoot,
               rootMargin: lazyBoundary,
@@ -575,8 +585,8 @@
             }),
             2
           ),
-          setIntersection = ref3[0],
-          isIntersected = ref3[1];
+          setIntersection = ref1[0],
+          isIntersected = ref1[1];
         var isVisible = !isLazy || isIntersected;
         var wrapperStyle = {
           boxSizing: "border-box",
@@ -684,6 +694,7 @@
         };
         if (isVisible) {
           imgAttributes = generateImgAttrs({
+            config: config,
             src: src,
             unoptimized: unoptimized,
             layout: layout,
@@ -784,6 +795,7 @@
                   {},
                   rest,
                   generateImgAttrs({
+                    config: config,
                     src: src,
                     unoptimized: unoptimized,
                     layout: layout,
@@ -834,12 +846,12 @@
         return src[0] === "/" ? src.slice(1) : src;
       }
       function imgixLoader(param) {
-        var root = param.root,
+        var config = param.config,
           src = param.src,
           width = param.width,
           quality = param.quality;
         // Demo: https://static.imgix.net/daisy.png?auto=format&fit=max&w=300
-        var url = new URL("".concat(root).concat(normalizeSrc(src)));
+        var url = new URL("".concat(config.path).concat(normalizeSrc(src)));
         var params = url.searchParams;
         params.set("auto", params.get("auto") || "format");
         params.set("fit", params.get("fit") || "max");
@@ -850,16 +862,16 @@
         return url.href;
       }
       function akamaiLoader(param) {
-        var root = param.root,
+        var config = param.config,
           src = param.src,
           width = param.width;
         return ""
-          .concat(root)
+          .concat(config.path)
           .concat(normalizeSrc(src), "?imwidth=")
           .concat(width);
       }
       function cloudinaryLoader(param) {
-        var root = param.root,
+        var config = param.config,
           src = param.src,
           width = param.width,
           quality = param.quality;
@@ -872,7 +884,7 @@
         ];
         var paramsString = params.join(",") + "/";
         return ""
-          .concat(root)
+          .concat(config.path)
           .concat(paramsString)
           .concat(normalizeSrc(src));
       }
@@ -884,7 +896,7 @@
         );
       }
       function defaultLoader(param) {
-        var root = param.root,
+        var config = param.config,
           src = param.src,
           width = param.width,
           quality = param.quality;
@@ -892,7 +904,7 @@
           var parsedSrc, missingValues;
         }
         return ""
-          .concat(root, "?url=")
+          .concat(config.path, "?url=")
           .concat(encodeURIComponent(src), "&w=")
           .concat(width, "&q=")
           .concat(quality || 75);
@@ -1155,38 +1167,6 @@
       /***/
     },
 
-    /***/ 5809: /***/ function(__unused_webpack_module, exports) {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true
-      });
-      exports.imageConfigDefault = exports.VALID_LOADERS = void 0;
-      const VALID_LOADERS = [
-        "default",
-        "imgix",
-        "cloudinary",
-        "akamai",
-        "custom"
-      ];
-      exports.VALID_LOADERS = VALID_LOADERS;
-      const imageConfigDefault = {
-        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-        path: "/_next/image",
-        loader: "default",
-        domains: [],
-        disableStaticImages: false,
-        minimumCacheTTL: 60,
-        formats: ["image/webp"]
-      };
-      exports.imageConfigDefault = imageConfigDefault;
-
-      //# sourceMappingURL=image-config.js.map
-
-      /***/
-    },
-
     /***/ 5675: /***/ function(
       module,
       __unused_webpack_exports,

Diff for main-HASH.js

@@ -474,6 +474,7 @@
       var _isError = __webpack_require__(676);
       var _vitals = __webpack_require__(5834);
       var _refresh = __webpack_require__(9831);
+      var _imageConfigContext = __webpack_require__(9977);
       function asyncGeneratorStep(
         gen,
         resolve,
@@ -1233,7 +1234,18 @@
               {
                 value: headManager
               },
-              children
+              /*#__PURE__*/ _react.default.createElement(
+                _imageConfigContext.ImageConfigContext.Provider,
+                {
+                  value: {
+                    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+                    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+                    path: "/_next/image",
+                    loader: "default"
+                  }
+                },
+                children
+              )
             )
           )
         );
@@ -3890,6 +3902,36 @@
       /***/
     },
 
+    /***/ 9977: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.ImageConfigContext = void 0;
+      var _react = _interopRequireDefault(__webpack_require__(7294));
+      var _imageConfig = __webpack_require__(5809);
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+      var ImageConfigContext = _react.default.createContext(
+        _imageConfig.imageConfigDefault
+      );
+      exports.ImageConfigContext = ImageConfigContext;
+      if (false) {
+      } //# sourceMappingURL=image-config-context.js.map
+
+      /***/
+    },
+
     /***/ 8887: /***/ function(__unused_webpack_module, exports) {
       "use strict";
 
@@ -9269,6 +9311,38 @@
       /***/
     },
 
+    /***/ 5809: /***/ function(__unused_webpack_module, exports) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.imageConfigDefault = exports.VALID_LOADERS = void 0;
+      const VALID_LOADERS = [
+        "default",
+        "imgix",
+        "cloudinary",
+        "akamai",
+        "custom"
+      ];
+      exports.VALID_LOADERS = VALID_LOADERS;
+      const imageConfigDefault = {
+        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+        path: "/_next/image",
+        loader: "default",
+        domains: [],
+        disableStaticImages: false,
+        minimumCacheTTL: 60,
+        formats: ["image/webp"]
+      };
+      exports.imageConfigDefault = imageConfigDefault;
+
+      //# sourceMappingURL=image-config.js.map
+
+      /***/
+    },
+
     /***/ 2431: /***/ function() {
       /* (ignored) */
       /***/

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6aa5488d484960f9.js"
+      src="/_next/static/chunks/main-ad48a4a1404a7cad.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6aa5488d484960f9.js"
+      src="/_next/static/chunks/main-ad48a4a1404a7cad.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6aa5488d484960f9.js"
+      src="/_next/static/chunks/main-ad48a4a1404a7cad.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
buildDuration	21.7s	21.5s	-199ms
buildDurationCached	6.9s	6.9s	⚠️ +26ms
nodeModulesSize	359 MB	359 MB	⚠️ +3.33 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.562	3.527	-0.03
/ avg req/sec	701.76	708.79	+7.03
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.565	1.508	-0.06
/error-in-render avg req/sec	1597.41	1657.53	+60.12

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.1 kB	42.1 kB	✓
main-HASH.js gzip	27.5 kB	27.9 kB	⚠️ +365 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.3 kB	71.6 kB	⚠️ +365 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.56 kB	2.56 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	5.05 kB	5.05 kB	-6 B
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.28 kB	2.28 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.7 kB	14.7 kB	-6 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
_buildManifest.js gzip	459 B	458 B	-1 B
Overall change	459 B	458 B	-1 B

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	JuniorTour/next.js fix-31065	Change
index.html gzip	533 B	532 B	-1 B
link.html gzip	548 B	545 B	-3 B
withRouter.html gzip	527 B	525 B	-2 B
Overall change	1.61 kB	1.6 kB	-6 B

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-9e69c038ec9191f6.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-413844489ba1eb58.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-b932c7479a7c37ca.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -131,6 +131,7 @@
       var _head = _interopRequireDefault(__webpack_require__(5443));
       var _imageConfig = __webpack_require__(5809);
       var _useIntersection = __webpack_require__(7190);
+      var _imageConfigContext = __webpack_require__(9977);
       function _defineProperty1(obj, key, value) {
         if (key in obj) {
           Object.defineProperty(obj, key, {
@@ -225,6 +226,12 @@
         }
         return target;
       }
+      var configEnv = {
+        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+        path: "/_next/image",
+        loader: "default"
+      };
       var loadedImageURLs = new Set();
       var allImgs = new Map();
       var perfObserver;
@@ -263,29 +270,9 @@
           (isStaticRequire(src) || isStaticImageData(src))
         );
       }
-      var ref =
-          {
-            deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-            imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-            path: "/_next/image",
-            loader: "default"
-          } || _imageConfig.imageConfigDefault,
-        configDeviceSizes = ref.deviceSizes,
-        configImageSizes = ref.imageSizes,
-        configLoader = ref.loader,
-        configPath = ref.path,
-        configDomains = ref.domains;
-      // sort smallest to largest
-      var allSizes = _toConsumableArray(configDeviceSizes).concat(
-        _toConsumableArray(configImageSizes)
-      );
-      configDeviceSizes.sort(function(a, b) {
-        return a - b;
-      });
-      allSizes.sort(function(a, b) {
-        return a - b;
-      });
-      function getWidths(width, layout, sizes) {
+      function getWidths(param, width, layout, sizes) {
+        var deviceSizes = param.deviceSizes,
+          allSizes = param.allSizes;
         if (sizes && (layout === "fill" || layout === "responsive")) {
           // Find all the "vw" percent sizes used in the sizes prop
           var viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
@@ -302,7 +289,7 @@
               ) * 0.01;
             return {
               widths: allSizes.filter(function(s) {
-                return s >= configDeviceSizes[0] * smallestRatio;
+                return s >= deviceSizes[0] * smallestRatio;
               }),
               kind: "w"
             };
@@ -318,7 +305,7 @@
           layout === "responsive"
         ) {
           return {
-            widths: configDeviceSizes,
+            widths: deviceSizes,
             kind: "w"
           };
         }
@@ -345,7 +332,8 @@
         };
       }
       function generateImgAttrs(param) {
-        var src = param.src,
+        var config = param.config,
+          src = param.src,
           unoptimized = param.unoptimized,
           layout = param.layout,
           width = param.width,
@@ -359,9 +347,9 @@
             sizes: undefined
           };
         }
-        var ref1 = getWidths(width, layout, sizes),
-          widths = ref1.widths,
-          kind = ref1.kind;
+        var ref = getWidths(config, width, layout, sizes),
+          widths = ref.widths,
+          kind = ref.kind;
         var last = widths.length - 1;
         return {
           sizes: !sizes && kind === "w" ? "100vw" : sizes,
@@ -370,6 +358,7 @@
               return ""
                 .concat(
                   loader({
+                    config: config,
                     src: src,
                     quality: quality,
                     width: w
@@ -387,6 +376,7 @@
           // and `sizes` are defined.
           // This bug cannot be reproduced in Chrome or Firefox.
           src: loader({
+            config: config,
             src: src,
             quality: quality,
             width: widths[last]
@@ -403,21 +393,19 @@
         return undefined;
       }
       function defaultImageLoader(loaderProps) {
-        var load = loaders.get(configLoader);
+        var ref;
+        var loaderKey =
+          ((ref = loaderProps.config) === null || ref === void 0
+            ? void 0
+            : ref.loader) || "default";
+        var load = loaders.get(loaderKey);
         if (load) {
-          return load(
-            _objectSpread(
-              {
-                root: configPath
-              },
-              loaderProps
-            )
-          );
+          return load(loaderProps);
         }
         throw new Error(
           'Unknown "loader" found in "next.config.js". Expected: '
             .concat(_imageConfig.VALID_LOADERS.join(", "), ". Received: ")
-            .concat(configLoader)
+            .concat(loaderKey)
         );
       }
       // See https://stackoverflow.com/q/39777833/266535 for why we use this ref
@@ -458,7 +446,7 @@
                 });
               }
               if (false) {
-                var parent, ref2;
+                var parent, ref;
               }
             });
           }
@@ -518,6 +506,28 @@
             "blurDataURL"
           ]);
         var imgRef = (0, _react).useRef(null);
+        var configContext = (0, _react).useContext(
+          _imageConfigContext.ImageConfigContext
+        );
+        var config = (0, _react).useMemo(
+          function() {
+            var c =
+              configEnv || configContext || _imageConfig.imageConfigDefault;
+            var allSizes = _toConsumableArray(c.deviceSizes)
+              .concat(_toConsumableArray(c.imageSizes))
+              .sort(function(a, b) {
+                return a - b;
+              });
+            var deviceSizes = c.deviceSizes.sort(function(a, b) {
+              return a - b;
+            });
+            return _objectSpread({}, c, {
+              allSizes: allSizes,
+              deviceSizes: deviceSizes
+            });
+          },
+          [configContext]
+        );
         var rest = all;
         var layout = sizes ? "responsive" : "intrinsic";
         if ("layout" in rest) {
@@ -567,7 +577,7 @@
         if (false) {
           var url, urlStr, VALID_BLUR_EXT;
         }
-        var ref3 = _slicedToArray(
+        var ref1 = _slicedToArray(
             (0, _useIntersection).useIntersection({
               rootRef: lazyRoot,
               rootMargin: lazyBoundary,
@@ -575,8 +585,8 @@
             }),
             2
           ),
-          setIntersection = ref3[0],
-          isIntersected = ref3[1];
+          setIntersection = ref1[0],
+          isIntersected = ref1[1];
         var isVisible = !isLazy || isIntersected;
         var wrapperStyle = {
           boxSizing: "border-box",
@@ -684,6 +694,7 @@
         };
         if (isVisible) {
           imgAttributes = generateImgAttrs({
+            config: config,
             src: src,
             unoptimized: unoptimized,
             layout: layout,
@@ -784,6 +795,7 @@
                   {},
                   rest,
                   generateImgAttrs({
+                    config: config,
                     src: src,
                     unoptimized: unoptimized,
                     layout: layout,
@@ -834,12 +846,12 @@
         return src[0] === "/" ? src.slice(1) : src;
       }
       function imgixLoader(param) {
-        var root = param.root,
+        var config = param.config,
           src = param.src,
           width = param.width,
           quality = param.quality;
         // Demo: https://static.imgix.net/daisy.png?auto=format&fit=max&w=300
-        var url = new URL("".concat(root).concat(normalizeSrc(src)));
+        var url = new URL("".concat(config.path).concat(normalizeSrc(src)));
         var params = url.searchParams;
         params.set("auto", params.get("auto") || "format");
         params.set("fit", params.get("fit") || "max");
@@ -850,16 +862,16 @@
         return url.href;
       }
       function akamaiLoader(param) {
-        var root = param.root,
+        var config = param.config,
           src = param.src,
           width = param.width;
         return ""
-          .concat(root)
+          .concat(config.path)
           .concat(normalizeSrc(src), "?imwidth=")
           .concat(width);
       }
       function cloudinaryLoader(param) {
-        var root = param.root,
+        var config = param.config,
           src = param.src,
           width = param.width,
           quality = param.quality;
@@ -872,7 +884,7 @@
         ];
         var paramsString = params.join(",") + "/";
         return ""
-          .concat(root)
+          .concat(config.path)
           .concat(paramsString)
           .concat(normalizeSrc(src));
       }
@@ -884,7 +896,7 @@
         );
       }
       function defaultLoader(param) {
-        var root = param.root,
+        var config = param.config,
           src = param.src,
           width = param.width,
           quality = param.quality;
@@ -892,7 +904,7 @@
           var parsedSrc, missingValues;
         }
         return ""
-          .concat(root, "?url=")
+          .concat(config.path, "?url=")
           .concat(encodeURIComponent(src), "&w=")
           .concat(width, "&q=")
           .concat(quality || 75);
@@ -1155,38 +1167,6 @@
       /***/
     },
 
-    /***/ 5809: /***/ function(__unused_webpack_module, exports) {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true
-      });
-      exports.imageConfigDefault = exports.VALID_LOADERS = void 0;
-      const VALID_LOADERS = [
-        "default",
-        "imgix",
-        "cloudinary",
-        "akamai",
-        "custom"
-      ];
-      exports.VALID_LOADERS = VALID_LOADERS;
-      const imageConfigDefault = {
-        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-        path: "/_next/image",
-        loader: "default",
-        domains: [],
-        disableStaticImages: false,
-        minimumCacheTTL: 60,
-        formats: ["image/webp"]
-      };
-      exports.imageConfigDefault = imageConfigDefault;
-
-      //# sourceMappingURL=image-config.js.map
-
-      /***/
-    },
-
     /***/ 5675: /***/ function(
       module,
       __unused_webpack_exports,

Diff for main-HASH.js

@@ -474,6 +474,7 @@
       var _isError = __webpack_require__(676);
       var _vitals = __webpack_require__(5834);
       var _refresh = __webpack_require__(9831);
+      var _imageConfigContext = __webpack_require__(9977);
       function asyncGeneratorStep(
         gen,
         resolve,
@@ -1233,7 +1234,18 @@
               {
                 value: headManager
               },
-              children
+              /*#__PURE__*/ _react.default.createElement(
+                _imageConfigContext.ImageConfigContext.Provider,
+                {
+                  value: {
+                    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+                    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+                    path: "/_next/image",
+                    loader: "default"
+                  }
+                },
+                children
+              )
             )
           )
         );
@@ -3890,6 +3902,36 @@
       /***/
     },
 
+    /***/ 9977: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.ImageConfigContext = void 0;
+      var _react = _interopRequireDefault(__webpack_require__(7294));
+      var _imageConfig = __webpack_require__(5809);
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+      var ImageConfigContext = _react.default.createContext(
+        _imageConfig.imageConfigDefault
+      );
+      exports.ImageConfigContext = ImageConfigContext;
+      if (false) {
+      } //# sourceMappingURL=image-config-context.js.map
+
+      /***/
+    },
+
     /***/ 8887: /***/ function(__unused_webpack_module, exports) {
       "use strict";
 
@@ -9269,6 +9311,38 @@
       /***/
     },
 
+    /***/ 5809: /***/ function(__unused_webpack_module, exports) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.imageConfigDefault = exports.VALID_LOADERS = void 0;
+      const VALID_LOADERS = [
+        "default",
+        "imgix",
+        "cloudinary",
+        "akamai",
+        "custom"
+      ];
+      exports.VALID_LOADERS = VALID_LOADERS;
+      const imageConfigDefault = {
+        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+        path: "/_next/image",
+        loader: "default",
+        domains: [],
+        disableStaticImages: false,
+        minimumCacheTTL: 60,
+        formats: ["image/webp"]
+      };
+      exports.imageConfigDefault = imageConfigDefault;
+
+      //# sourceMappingURL=image-config.js.map
+
+      /***/
+    },
+
     /***/ 2431: /***/ function() {
       /* (ignored) */
       /***/

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6aa5488d484960f9.js"
+      src="/_next/static/chunks/main-ad48a4a1404a7cad.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6aa5488d484960f9.js"
+      src="/_next/static/chunks/main-ad48a4a1404a7cad.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6aa5488d484960f9.js"
+      src="/_next/static/chunks/main-ad48a4a1404a7cad.js"
       defer=""
     ></script>
     <script

Commit: 8e091dd

fix: image config not work for `node_modules` Co-authored-by: Steven <steven@ceriously.com>

JuniorTour requested review from huozhi, ijjk, shuding, styfle and timneutkens as code owners January 22, 2022 13:07

ijjk added the type: next label Jan 22, 2022

styfle reviewed Jan 24, 2022

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

This comment has been minimized.

Sign in to view

styfle reviewed Jan 24, 2022

View reviewed changes

test/integration/image-component/image-from-node-modules/test/index.test.js Show resolved Hide resolved

styfle changed the title ~~fix: image config not work for node_modules (fix #31065)~~ fix: next/image usage from node_modules Jan 24, 2022

styfle mentioned this pull request Jan 24, 2022

next.config.js is not considered for node_modules that import next/image #31065

Closed

JuniorTour force-pushed the fix-31065 branch 2 times, most recently from a4b790e to 27604fb Compare February 1, 2022 12:31

This comment has been minimized.

Sign in to view

styfle reviewed Feb 2, 2022

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

styfle reviewed Feb 2, 2022

View reviewed changes

packages/next/server/render.tsx Outdated Show resolved Hide resolved

styfle reviewed Feb 2, 2022

View reviewed changes

packages/next/shared/lib/runtime-image-config-context.ts Outdated Show resolved Hide resolved

JuniorTour force-pushed the fix-31065 branch 2 times, most recently from 37ded21 to cd61d6b Compare February 5, 2022 14:25

JuniorTour added 5 commits February 7, 2022 15:04

fix: image config not work for node_modules

cfcf90e

fix: useContext API && add test case for prod

fefd897

fix: rename to ImageConfigContext

8e1b5bd

fix: add to client

0fa9d37

fix: add ImageConfigContext to both server and client

0da4ba9

fix: renderOpts.image is string fix: cleanup fix: parse error

JuniorTour force-pushed the fix-31065 branch from cd61d6b to 0268774 Compare February 7, 2022 07:08

fix: rm stringify for renderOpts.images

3ac014a

JuniorTour force-pushed the fix-31065 branch from 0268774 to 3ac014a Compare February 7, 2022 16:34

This comment has been minimized.

Sign in to view

styfle reviewed Feb 7, 2022

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

styfle added 2 commits February 7, 2022 14:34

Remove globals in favor of passing config variable

b8b358f

useMemo

a80f1cd

This comment has been minimized.

Sign in to view

Fix lint

41e5820

styfle previously approved these changes Feb 7, 2022

View reviewed changes

This comment has been minimized.

Sign in to view

Fix lint again

a252e6c

styfle dismissed their stale review via a252e6c February 7, 2022 23:44

This comment has been minimized.

Sign in to view

Merge branch 'canary' into fix-31065

8faa03e

styfle previously approved these changes Feb 8, 2022

View reviewed changes

This comment has been minimized.

Sign in to view

Merge branch 'canary' into fix-31065

9579d99

styfle dismissed their stale review via 9579d99 February 8, 2022 22:10

styfle previously approved these changes Feb 8, 2022

View reviewed changes

styfle dismissed their stale review via 6b02148 February 8, 2022 23:33

styfle added 2 commits February 8, 2022 18:33

Fix merge conflict

6b02148

Merge branch 'canary' into fix-31065

8e091dd

styfle approved these changes Feb 8, 2022

View reviewed changes

Merge branch 'canary' into fix-31065

cc3b33e

styfle merged commit e2d6c31 into vercel:canary Feb 9, 2022

natew pushed a commit to natew/next.js that referenced this pull request Feb 16, 2022

fix: next/image usage from node_modules (vercel#33559)

02accdd

fix: image config not work for `node_modules` Co-authored-by: Steven <steven@ceriously.com>

balazsorban44 mentioned this pull request Feb 16, 2022

Use next/image in component library, but throws error in dev mode #26674

Closed

github-actions bot locked as resolved and limited conversation to collaborators Mar 11, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: `next/image` usage from `node_modules` #33559

fix: `next/image` usage from `node_modules` #33559

JuniorTour commented Jan 22, 2022

This comment has been minimized.

This comment has been minimized.

ijjk commented Feb 7, 2022

This comment has been minimized.

This comment has been minimized.

styfle left a comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

JuniorTour commented Feb 8, 2022

styfle commented Feb 8, 2022 •

edited

ijjk commented Feb 9, 2022

Diffs

Diffs

fix: next/image usage from node_modules #33559

fix: next/image usage from node_modules #33559

Conversation

JuniorTour commented Jan 22, 2022

Why error?

Why fix?

Bug

This comment has been minimized.

This comment has been minimized.

ijjk commented Feb 7, 2022

Failing test suites

This comment has been minimized.

This comment has been minimized.

styfle left a comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

JuniorTour commented Feb 8, 2022

styfle commented Feb 8, 2022 • edited

ijjk commented Feb 9, 2022

Stats from current PR

Diffs

Diffs

fix: `next/image` usage from `node_modules` #33559

fix: `next/image` usage from `node_modules` #33559

styfle commented Feb 8, 2022 •

edited