Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use import() to load next.config.js #29935

Merged
merged 14 commits into from
Oct 16, 2021

Conversation

timneutkens
Copy link
Member

@timneutkens timneutkens commented Oct 15, 2021

This is blocked on a new release of SWC that supports disabling transformation of import(), hence the failing test. @kdy1 is currently working on it.

This changes the way next.config.js is loaded from require() to import(). It also adds loading for next.config.mjs, given that there's still more work to do for "type": "module" in the project itself using next.config.mjs will allow you to import ESModules.

Bug

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

Feature

  • Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
  • Related issues linked using fixes #number
  • Integration tests added
  • Documentation added
  • Telemetry added. In case of a feature if it's used or not.
  • Errors have helpful link attached, see contributing.md

Documentation / Examples

  • Make sure the linting passes

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ctjlewis
Copy link
Contributor

Really great work Tim! I ran into the same problems with failing tests when swapping out that require statement.

As I understand it, the codebase should eventually be good to use await import(...) for all current require(...) calls, and shim require with createRequire(...) if it is needed for an edge case. After that, "type": "module" won't break everything.

@ijjk

This comment has been minimized.

packages/next/bin/next.ts Outdated Show resolved Hide resolved
@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk
Copy link
Member

ijjk commented Oct 16, 2021

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary timneutkens/next.js add/import-config Change
buildDuration 12s 12.3s ⚠️ +297ms
buildDurationCached 2.9s 2.9s ⚠️ +5ms
nodeModulesSize 199 MB 199 MB ⚠️ +3.07 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary timneutkens/next.js add/import-config Change
/ failed reqs 0 0
/ total time (seconds) 2.75 2.763 ⚠️ +0.01
/ avg req/sec 909.25 904.85 ⚠️ -4.4
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.239 1.257 ⚠️ +0.02
/error-in-render avg req/sec 2018.32 1989.51 ⚠️ -28.81
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary timneutkens/next.js add/import-config Change
779.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42.2 kB 42.2 kB
main-HASH.js gzip 27 kB 25 kB -2.04 kB
webpack-HASH.js gzip 1.45 kB 1.49 kB ⚠️ +36 B
558.HASH.js gzip N/A 3.02 kB N/A
Overall change 70.9 kB 71.9 kB ⚠️ +1.02 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary timneutkens/next.js add/import-config Change
polyfills-a4..dd70.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary timneutkens/next.js add/import-config Change
_app-HASH.js gzip 977 B 977 B
_error-HASH.js gzip 194 B 3.11 kB ⚠️ +2.92 kB
amp-HASH.js gzip 311 B 553 B ⚠️ +242 B
css-HASH.js gzip 328 B 328 B
dynamic-HASH.js gzip 2.67 kB 2.73 kB ⚠️ +56 B
head-HASH.js gzip 351 B 2.37 kB ⚠️ +2.02 kB
hooks-HASH.js gzip 918 B 918 B
image-HASH.js gzip 4.14 kB 5.86 kB ⚠️ +1.72 kB
index-HASH.js gzip 260 B 260 B
link-HASH.js gzip 1.66 kB 1.66 kB
routerDirect..HASH.js gzip 320 B 320 B
script-HASH.js gzip 386 B 386 B
withRouter-HASH.js gzip 319 B 319 B
bb14e60e810b..30f.css gzip 125 B 125 B
Overall change 13 kB 19.9 kB ⚠️ +6.95 kB
Client Build Manifests Overall decrease ✓
vercel/next.js canary timneutkens/next.js add/import-config Change
_buildManifest.js gzip 493 B 490 B -3 B
Overall change 493 B 490 B -3 B
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary timneutkens/next.js add/import-config Change
index.html gzip 540 B 538 B -2 B
link.html gzip 551 B 550 B -1 B
withRouter.html gzip 533 B 531 B -2 B
Overall change 1.62 kB 1.62 kB -5 B

Diffs

Diff for _buildManifest.js
@@ -2,22 +2,22 @@ self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
   "/": ["static\u002Fchunks\u002Fpages\u002Findex-b90032992c9b33402f59.js"],
   "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-9e631ee4052c01361779.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-5fc7609ba2d7d30ff4e6.js"
   ],
-  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-0fa04aed06d71a39bf7a.js"],
+  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-6df01f9496d5b32f1b30.js"],
   "/css": [
     "static\u002Fcss\u002F59de118426c393f58653.css",
     "static\u002Fchunks\u002Fpages\u002Fcss-e5d9641a48cea07ea0d8.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-3de08c026567a9cee18f.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-5ab15ee7c2f1d7071742.js"
   ],
-  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-bc8abdb676f58cdf601b.js"],
+  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-3438f380e58241b81e3c.js"],
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-c1f9675770bff0c63be8.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-19e6b3a207d8f370283a.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-3a3f2ee26479962d56c1.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-962a2a330709d57cd073.js"],
   "/routerDirect": [
Diff for _error-HASH.js
@@ -1,6 +1,863 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [820],
+  [820, 558],
   {
+    /***/ 3646: /***/ function(
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      var arrayLikeToArray = __webpack_require__(7228);
+
+      function _arrayWithoutHoles(arr) {
+        if (Array.isArray(arr)) return arrayLikeToArray(arr);
+      }
+
+      module.exports = _arrayWithoutHoles;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 9713: /***/ function(module) {
+      function _defineProperty(obj, key, value) {
+        if (key in obj) {
+          Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+          });
+        } else {
+          obj[key] = value;
+        }
+
+        return obj;
+      }
+
+      module.exports = _defineProperty;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 6860: /***/ function(module) {
+      function _iterableToArray(iter) {
+        if (
+          (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null) ||
+          iter["@@iterator"] != null
+        )
+          return Array.from(iter);
+      }
+
+      module.exports = _iterableToArray;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 8206: /***/ function(module) {
+      function _nonIterableSpread() {
+        throw new TypeError(
+          "Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
+        );
+      }
+
+      module.exports = _nonIterableSpread;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 319: /***/ function(
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      var arrayWithoutHoles = __webpack_require__(3646);
+
+      var iterableToArray = __webpack_require__(6860);
+
+      var unsupportedIterableToArray = __webpack_require__(379);
+
+      var nonIterableSpread = __webpack_require__(8206);
+
+      function _toConsumableArray(arr) {
+        return (
+          arrayWithoutHoles(arr) ||
+          iterableToArray(arr) ||
+          unsupportedIterableToArray(arr) ||
+          nonIterableSpread()
+        );
+      }
+
+      module.exports = _toConsumableArray;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 7558: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      var _classCallCheck = __webpack_require__(4575);
+
+      var _createClass = __webpack_require__(3913);
+
+      var _inherits = __webpack_require__(2205);
+
+      var _possibleConstructorReturn = __webpack_require__(8585);
+
+      var _getPrototypeOf = __webpack_require__(9754);
+
+      function _createSuper(Derived) {
+        var hasNativeReflectConstruct = _isNativeReflectConstruct();
+        return function _createSuperInternal() {
+          var Super = _getPrototypeOf(Derived),
+            result;
+          if (hasNativeReflectConstruct) {
+            var NewTarget = _getPrototypeOf(this).constructor;
+            result = Reflect.construct(Super, arguments, NewTarget);
+          } else {
+            result = Super.apply(this, arguments);
+          }
+          return _possibleConstructorReturn(this, result);
+        };
+      }
+
+      function _isNativeReflectConstruct() {
+        if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+        if (Reflect.construct.sham) return false;
+        if (typeof Proxy === "function") return true;
+        try {
+          Boolean.prototype.valueOf.call(
+            Reflect.construct(Boolean, [], function() {})
+          );
+          return true;
+        } catch (e) {
+          return false;
+        }
+      }
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports["default"] = void 0;
+
+      var _react = _interopRequireDefault(__webpack_require__(7294));
+
+      var _head = _interopRequireDefault(__webpack_require__(7006));
+
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+
+      var statusCodes = {
+        400: "Bad Request",
+        404: "This page could not be found",
+        405: "Method Not Allowed",
+        500: "Internal Server Error"
+      };
+
+      function _getInitialProps(_ref) {
+        var res = _ref.res,
+          err = _ref.err;
+        var statusCode =
+          res && res.statusCode ? res.statusCode : err ? err.statusCode : 404;
+        return {
+          statusCode: statusCode
+        };
+      }
+
+      var Error = /*#__PURE__*/ (function(_react$default$Compon) {
+        _inherits(Error, _react$default$Compon);
+
+        var _super = _createSuper(Error);
+
+        function Error() {
+          _classCallCheck(this, Error);
+
+          return _super.apply(this, arguments);
+        }
+
+        _createClass(Error, [
+          {
+            key: "render",
+            value: function render() {
+              var statusCode = this.props.statusCode;
+              var title =
+                this.props.title ||
+                statusCodes[statusCode] ||
+                "An unexpected error has occurred";
+              return /*#__PURE__*/ _react["default"].createElement(
+                "div",
+                {
+                  style: styles.error
+                },
+                /*#__PURE__*/ _react["default"].createElement(
+                  _head["default"],
+                  null,
+                  /*#__PURE__*/ _react["default"].createElement(
+                    "title",
+                    null,
+                    statusCode
+                      ? "".concat(statusCode, ": ").concat(title)
+                      : "Application error: a client-side exception has occurred"
+                  )
+                ),
+                /*#__PURE__*/ _react["default"].createElement(
+                  "div",
+                  null,
+                  /*#__PURE__*/ _react["default"].createElement("style", {
+                    dangerouslySetInnerHTML: {
+                      __html: "body { margin: 0 }"
+                    }
+                  }),
+                  statusCode
+                    ? /*#__PURE__*/ _react["default"].createElement(
+                        "h1",
+                        {
+                          style: styles.h1
+                        },
+                        statusCode
+                      )
+                    : null,
+                  /*#__PURE__*/ _react["default"].createElement(
+                    "div",
+                    {
+                      style: styles.desc
+                    },
+                    /*#__PURE__*/ _react["default"].createElement(
+                      "h2",
+                      {
+                        style: styles.h2
+                      },
+                      this.props.title || statusCode
+                        ? title
+                        : /*#__PURE__*/ _react["default"].createElement(
+                            _react["default"].Fragment,
+                            null,
+                            "Application error: a client-side exception has occurred (see the browser console for more information)"
+                          ),
+                      "."
+                    )
+                  )
+                )
+              );
+            }
+          }
+        ]);
+
+        return Error;
+      })(_react["default"].Component);
+
+      Error.displayName = "ErrorPage";
+      Error.getInitialProps = _getInitialProps;
+      Error.origGetInitialProps = _getInitialProps;
+      exports["default"] = Error;
+      var styles = {
+        error: {
+          color: "#000",
+          background: "#fff",
+          fontFamily:
+            '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
+          height: "100vh",
+          textAlign: "center",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        desc: {
+          display: "inline-block",
+          textAlign: "left",
+          lineHeight: "49px",
+          height: "49px",
+          verticalAlign: "middle"
+        },
+        h1: {
+          display: "inline-block",
+          borderRight: "1px solid rgba(0, 0, 0,.3)",
+          margin: 0,
+          marginRight: "20px",
+          padding: "10px 23px 10px 0",
+          fontSize: "24px",
+          fontWeight: 500,
+          verticalAlign: "top"
+        },
+        h2: {
+          fontSize: "14px",
+          fontWeight: "normal",
+          lineHeight: "inherit",
+          margin: 0,
+          padding: 0
+        }
+      };
+
+      /***/
+    },
+
+    /***/ 2698: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.AmpStateContext = void 0;
+
+      var _react = _interopRequireDefault(__webpack_require__(7294));
+
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+
+      var AmpStateContext = _react["default"].createContext({});
+
+      exports.AmpStateContext = AmpStateContext;
+
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 4783: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.isInAmpMode = isInAmpMode;
+      exports.useAmp = useAmp;
+
+      var _react = _interopRequireDefault(__webpack_require__(7294));
+
+      var _ampContext = __webpack_require__(2698);
+
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+
+      function isInAmpMode() {
+        var _ref =
+            arguments.length > 0 && arguments[0] !== undefined
+              ? arguments[0]
+              : {},
+          _ref$ampFirst = _ref.ampFirst,
+          ampFirst = _ref$ampFirst === void 0 ? false : _ref$ampFirst,
+          _ref$hybrid = _ref.hybrid,
+          hybrid = _ref$hybrid === void 0 ? false : _ref$hybrid,
+          _ref$hasQuery = _ref.hasQuery,
+          hasQuery = _ref$hasQuery === void 0 ? false : _ref$hasQuery;
+
+        return ampFirst || (hybrid && hasQuery);
+      }
+
+      function useAmp() {
+        // Don't assign the context value to a variable to save bytes
+        return isInAmpMode(
+          _react["default"].useContext(_ampContext.AmpStateContext)
+        );
+      }
+
+      /***/
+    },
+
+    /***/ 7006: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      var _defineProperty = __webpack_require__(9713);
+
+      function ownKeys(object, enumerableOnly) {
+        var keys = Object.keys(object);
+        if (Object.getOwnPropertySymbols) {
+          var symbols = Object.getOwnPropertySymbols(object);
+          if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+              return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+          }
+          keys.push.apply(keys, symbols);
+        }
+        return keys;
+      }
+
+      function _objectSpread(target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i] != null ? arguments[i] : {};
+          if (i % 2) {
+            ownKeys(Object(source), true).forEach(function(key) {
+              _defineProperty(target, key, source[key]);
+            });
+          } else if (Object.getOwnPropertyDescriptors) {
+            Object.defineProperties(
+              target,
+              Object.getOwnPropertyDescriptors(source)
+            );
+          } else {
+            ownKeys(Object(source)).forEach(function(key) {
+              Object.defineProperty(
+                target,
+                key,
+                Object.getOwnPropertyDescriptor(source, key)
+              );
+            });
+          }
+        }
+        return target;
+      }
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.defaultHead = defaultHead;
+      exports["default"] = void 0;
+
+      var _react = _interopRequireWildcard(__webpack_require__(7294));
+
+      var _sideEffect = _interopRequireDefault(__webpack_require__(9263));
+
+      var _ampContext = __webpack_require__(2698);
+
+      var _headManagerContext = __webpack_require__(5203);
+
+      var _amp = __webpack_require__(4783);
+
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+
+      function _interopRequireWildcard(obj) {
+        if (obj && obj.__esModule) {
+          return obj;
+        } else {
+          var newObj = {};
+
+          if (obj != null) {
+            for (var key in obj) {
+              if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                var desc =
+                  Object.defineProperty && Object.getOwnPropertyDescriptor
+                    ? Object.getOwnPropertyDescriptor(obj, key)
+                    : {};
+
+                if (desc.get || desc.set) {
+                  Object.defineProperty(newObj, key, desc);
+                } else {
+                  newObj[key] = obj[key];
+                }
+              }
+            }
+          }
+
+          newObj["default"] = obj;
+          return newObj;
+        }
+      }
+
+      function defaultHead() {
+        var inAmpMode =
+          arguments.length > 0 && arguments[0] !== undefined
+            ? arguments[0]
+            : false;
+        var head = [
+          /*#__PURE__*/ _react["default"].createElement("meta", {
+            charSet: "utf-8"
+          })
+        ];
+
+        if (!inAmpMode) {
+          head.push(
+            /*#__PURE__*/ _react["default"].createElement("meta", {
+              name: "viewport",
+              content: "width=device-width"
+            })
+          );
+        }
+
+        return head;
+      }
+
+      function onlyReactElement(list, child) {
+        // React children can be "string" or "number" in this case we ignore them for backwards compat
+        if (typeof child === "string" || typeof child === "number") {
+          return list;
+        } // Adds support for React.Fragment
+
+        if (child.type === _react["default"].Fragment) {
+          return list.concat(
+            _react["default"].Children.toArray(child.props.children).reduce(
+              function(fragmentList, fragmentChild) {
+                if (
+                  typeof fragmentChild === "string" ||
+                  typeof fragmentChild === "number"
+                ) {
+                  return fragmentList;
+                }
+
+                return fragmentList.concat(fragmentChild);
+              },
+              []
+            )
+          );
+        }
+
+        return list.concat(child);
+      }
+
+      var METATYPES = ["name", "httpEquiv", "charSet", "itemProp"];
+      /*
+ returns a function for filtering head child elements
+ which shouldn't be duplicated, like <title/>
+ Also adds support for deduplicated `key` properties
+*/
+
+      function unique() {
+        var keys = new Set();
+        var tags = new Set();
+        var metaTypes = new Set();
+        var metaCategories = {};
+        return function(h) {
+          var isUnique = true;
+          var hasKey = false;
+
+          if (h.key && typeof h.key !== "number" && h.key.indexOf("$") > 0) {
+            hasKey = true;
+            var key = h.key.slice(h.key.indexOf("$") + 1);
+
+            if (keys.has(key)) {
+              isUnique = false;
+            } else {
+              keys.add(key);
+            }
+          } // eslint-disable-next-line default-case
+
+          switch (h.type) {
+            case "title":
+            case "base":
+              if (tags.has(h.type)) {
+                isUnique = false;
+              } else {
+                tags.add(h.type);
+              }
+
+              break;
+
+            case "meta":
+              for (var i = 0, len = METATYPES.length; i < len; i++) {
+                var metatype = METATYPES[i];
+                if (!h.props.hasOwnProperty(metatype)) continue;
+
+                if (metatype === "charSet") {
+                  if (metaTypes.has(metatype)) {
+                    isUnique = false;
+                  } else {
+                    metaTypes.add(metatype);
+                  }
+                } else {
+                  var category = h.props[metatype];
+                  var categories = metaCategories[metatype] || new Set();
+
+                  if (
+                    (metatype !== "name" || !hasKey) &&
+                    categories.has(category)
+                  ) {
+                    isUnique = false;
+                  } else {
+                    categories.add(category);
+                    metaCategories[metatype] = categories;
+                  }
+                }
+              }
+
+              break;
+          }
+
+          return isUnique;
+        };
+      }
+      /**
+       *
+       * @param headElements List of multiple <Head> instances
+       */
+
+      function reduceComponents(headElements, props) {
+        return headElements
+          .reduce(function(list, headElement) {
+            var headElementChildren = _react["default"].Children.toArray(
+              headElement.props.children
+            );
+
+            return list.concat(headElementChildren);
+          }, [])
+          .reduce(onlyReactElement, [])
+          .reverse()
+          .concat(defaultHead(props.inAmpMode))
+          .filter(unique())
+          .reverse()
+          .map(function(c, i) {
+            var key = c.key || i;
+
+            if (true && !props.inAmpMode) {
+              if (
+                c.type === "link" &&
+                c.props["href"] && // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
+                [
+                  "https://fonts.googleapis.com/css",
+                  "https://use.typekit.net/"
+                ].some(function(url) {
+                  return c.props["href"].startsWith(url);
+                })
+              ) {
+                var newProps = _objectSpread({}, c.props || {});
+
+                newProps["data-href"] = newProps["href"];
+                newProps["href"] = undefined; // Add this attribute to make it easy to identify optimized tags
+
+                newProps["data-optimized-fonts"] = true;
+                return /*#__PURE__*/ _react["default"].cloneElement(
+                  c,
+                  newProps
+                );
+              }
+            }
+
+            return /*#__PURE__*/ _react["default"].cloneElement(c, {
+              key: key
+            });
+          });
+      }
+      /**
+       * This component injects elements to `<head>` of your page.
+       * To avoid duplicated `tags` in `<head>` you can use the `key` property, which will make sure every tag is only rendered once.
+       */
+
+      function Head(_ref) {
+        var children = _ref.children;
+        var ampState = (0, _react).useContext(_ampContext.AmpStateContext);
+        var headManager = (0, _react).useContext(
+          _headManagerContext.HeadManagerContext
+        );
+        return /*#__PURE__*/ _react["default"].createElement(
+          _sideEffect["default"],
+          {
+            reduceComponentsToState: reduceComponents,
+            headManager: headManager,
+            inAmpMode: (0, _amp).isInAmpMode(ampState)
+          },
+          children
+        );
+      }
+
+      var _default = Head;
+      exports["default"] = _default;
+
+      /***/
+    },
+
+    /***/ 9263: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      var _toConsumableArray = __webpack_require__(319);
+
+      var _classCallCheck = __webpack_require__(4575);
+
+      var _createClass = __webpack_require__(3913);
+
+      var _assertThisInitialized = __webpack_require__(1506);
+
+      var _inherits = __webpack_require__(2205);
+
+      var _possibleConstructorReturn = __webpack_require__(8585);
+
+      var _getPrototypeOf = __webpack_require__(9754);
+
+      function _createSuper(Derived) {
+        var hasNativeReflectConstruct = _isNativeReflectConstruct();
+        return function _createSuperInternal() {
+          var Super = _getPrototypeOf(Derived),
+            result;
+          if (hasNativeReflectConstruct) {
+            var NewTarget = _getPrototypeOf(this).constructor;
+            result = Reflect.construct(Super, arguments, NewTarget);
+          } else {
+            result = Super.apply(this, arguments);
+          }
+          return _possibleConstructorReturn(this, result);
+        };
+      }
+
+      function _isNativeReflectConstruct() {
+        if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+        if (Reflect.construct.sham) return false;
+        if (typeof Proxy === "function") return true;
+        try {
+          Boolean.prototype.valueOf.call(
+            Reflect.construct(Boolean, [], function() {})
+          );
+          return true;
+        } catch (e) {
+          return false;
+        }
+      }
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports["default"] = void 0;
+
+      var _react = _interopRequireWildcard(__webpack_require__(7294));
+
+      function _interopRequireWildcard(obj) {
+        if (obj && obj.__esModule) {
+          return obj;
+        } else {
+          var newObj = {};
+
+          if (obj != null) {
+            for (var key in obj) {
+              if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                var desc =
+                  Object.defineProperty && Object.getOwnPropertyDescriptor
+                    ? Object.getOwnPropertyDescriptor(obj, key)
+                    : {};
+
+                if (desc.get || desc.set) {
+                  Object.defineProperty(newObj, key, desc);
+                } else {
+                  newObj[key] = obj[key];
+                }
+              }
+            }
+          }
+
+          newObj["default"] = obj;
+          return newObj;
+        }
+      }
+
+      var isServer = false;
+
+      var _class = /*#__PURE__*/ (function(_react$Component) {
+        _inherits(_class, _react$Component);
+
+        var _super = _createSuper(_class);
+
+        function _class(props) {
+          var _this;
+
+          _classCallCheck(this, _class);
+
+          _this = _super.call(this, props);
+
+          _this.emitChange = function() {
+            if (_this._hasHeadManager) {
+              _this.props.headManager.updateHead(
+                _this.props.reduceComponentsToState(
+                  _toConsumableArray(_this.props.headManager.mountedInstances),
+                  _this.props
+                )
+              );
+            }
+          };
+
+          _this._hasHeadManager =
+            _this.props.headManager && _this.props.headManager.mountedInstances;
+
+          if (isServer && _this._hasHeadManager) {
+            _this.props.headManager.mountedInstances.add(
+              _assertThisInitialized(_this)
+            );
+
+            _this.emitChange();
+          }
+
+          return _this;
+        }
+
+        _createClass(_class, [
+          {
+            key: "componentDidMount",
+            value: function componentDidMount() {
+              if (this._hasHeadManager) {
+                this.props.headManager.mountedInstances.add(this);
+              }
+
+              this.emitChange();
+            }
+          },
+          {
+            key: "componentDidUpdate",
+            value: function componentDidUpdate() {
+              this.emitChange();
+            }
+          },
+          {
+            key: "componentWillUnmount",
+            value: function componentWillUnmount() {
+              if (this._hasHeadManager) {
+                this.props.headManager.mountedInstances["delete"](this);
+              }
+
+              this.emitChange();
+            }
+          },
+          {
+            key: "render",
+            value: function render() {
+              return null;
+            }
+          }
+        ]);
+
+        return _class;
+      })(_react.Component);
+
+      exports["default"] = _class;
+
+      /***/
+    },
+
     /***/ 4977: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
Diff for amp-HASH.js
@@ -11,6 +11,88 @@
       /***/
     },
 
+    /***/ 2698: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.AmpStateContext = void 0;
+
+      var _react = _interopRequireDefault(__webpack_require__(7294));
+
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+
+      var AmpStateContext = _react["default"].createContext({});
+
+      exports.AmpStateContext = AmpStateContext;
+
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 4783: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.isInAmpMode = isInAmpMode;
+      exports.useAmp = useAmp;
+
+      var _react = _interopRequireDefault(__webpack_require__(7294));
+
+      var _ampContext = __webpack_require__(2698);
+
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+
+      function isInAmpMode() {
+        var _ref =
+            arguments.length > 0 && arguments[0] !== undefined
+              ? arguments[0]
+              : {},
+          _ref$ampFirst = _ref.ampFirst,
+          ampFirst = _ref$ampFirst === void 0 ? false : _ref$ampFirst,
+          _ref$hybrid = _ref.hybrid,
+          hybrid = _ref$hybrid === void 0 ? false : _ref$hybrid,
+          _ref$hasQuery = _ref.hasQuery,
+          hasQuery = _ref$hasQuery === void 0 ? false : _ref$hasQuery;
+
+        return ampFirst || (hybrid && hasQuery);
+      }
+
+      function useAmp() {
+        // Don't assign the context value to a variable to save bytes
+        return isInAmpMode(
+          _react["default"].useContext(_ampContext.AmpStateContext)
+        );
+      }
+
+      /***/
+    },
+
     /***/ 468: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
Diff for dynamic-HASH.js
@@ -1,6 +1,29 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [739],
   {
+    /***/ 9713: /***/ function(module) {
+      function _defineProperty(obj, key, value) {
+        if (key in obj) {
+          Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+          });
+        } else {
+          obj[key] = value;
+        }
+
+        return obj;
+      }
+
+      module.exports = _defineProperty;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
     /***/ 1897: /***/ function(
       __unused_webpack_module,
       exports,
Diff for head-HASH.js
@@ -1,6 +1,655 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [645],
   {
+    /***/ 3646: /***/ function(
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      var arrayLikeToArray = __webpack_require__(7228);
+
+      function _arrayWithoutHoles(arr) {
+        if (Array.isArray(arr)) return arrayLikeToArray(arr);
+      }
+
+      module.exports = _arrayWithoutHoles;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 9713: /***/ function(module) {
+      function _defineProperty(obj, key, value) {
+        if (key in obj) {
+          Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+          });
+        } else {
+          obj[key] = value;
+        }
+
+        return obj;
+      }
+
+      module.exports = _defineProperty;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 6860: /***/ function(module) {
+      function _iterableToArray(iter) {
+        if (
+          (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null) ||
+          iter["@@iterator"] != null
+        )
+          return Array.from(iter);
+      }
+
+      module.exports = _iterableToArray;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 8206: /***/ function(module) {
+      function _nonIterableSpread() {
+        throw new TypeError(
+          "Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
+        );
+      }
+
+      module.exports = _nonIterableSpread;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 319: /***/ function(
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      var arrayWithoutHoles = __webpack_require__(3646);
+
+      var iterableToArray = __webpack_require__(6860);
+
+      var unsupportedIterableToArray = __webpack_require__(379);
+
+      var nonIterableSpread = __webpack_require__(8206);
+
+      function _toConsumableArray(arr) {
+        return (
+          arrayWithoutHoles(arr) ||
+          iterableToArray(arr) ||
+          unsupportedIterableToArray(arr) ||
+          nonIterableSpread()
+        );
+      }
+
+      module.exports = _toConsumableArray;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 2698: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.AmpStateContext = void 0;
+
+      var _react = _interopRequireDefault(__webpack_require__(7294));
+
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+
+      var AmpStateContext = _react["default"].createContext({});
+
+      exports.AmpStateContext = AmpStateContext;
+
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 4783: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.isInAmpMode = isInAmpMode;
+      exports.useAmp = useAmp;
+
+      var _react = _interopRequireDefault(__webpack_require__(7294));
+
+      var _ampContext = __webpack_require__(2698);
+
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+
+      function isInAmpMode() {
+        var _ref =
+            arguments.length > 0 && arguments[0] !== undefined
+              ? arguments[0]
+              : {},
+          _ref$ampFirst = _ref.ampFirst,
+          ampFirst = _ref$ampFirst === void 0 ? false : _ref$ampFirst,
+          _ref$hybrid = _ref.hybrid,
+          hybrid = _ref$hybrid === void 0 ? false : _ref$hybrid,
+          _ref$hasQuery = _ref.hasQuery,
+          hasQuery = _ref$hasQuery === void 0 ? false : _ref$hasQuery;
+
+        return ampFirst || (hybrid && hasQuery);
+      }
+
+      function useAmp() {
+        // Don't assign the context value to a variable to save bytes
+        return isInAmpMode(
+          _react["default"].useContext(_ampContext.AmpStateContext)
+        );
+      }
+
+      /***/
+    },
+
+    /***/ 7006: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      var _defineProperty = __webpack_require__(9713);
+
+      function ownKeys(object, enumerableOnly) {
+        var keys = Object.keys(object);
+        if (Object.getOwnPropertySymbols) {
+          var symbols = Object.getOwnPropertySymbols(object);
+          if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+              return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+          }
+          keys.push.apply(keys, symbols);
+        }
+        return keys;
+      }
+
+      function _objectSpread(target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i] != null ? arguments[i] : {};
+          if (i % 2) {
+            ownKeys(Object(source), true).forEach(function(key) {
+              _defineProperty(target, key, source[key]);
+            });
+          } else if (Object.getOwnPropertyDescriptors) {
+            Object.defineProperties(
+              target,
+              Object.getOwnPropertyDescriptors(source)
+            );
+          } else {
+            ownKeys(Object(source)).forEach(function(key) {
+              Object.defineProperty(
+                target,
+                key,
+                Object.getOwnPropertyDescriptor(source, key)
+              );
+            });
+          }
+        }
+        return target;
+      }
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.defaultHead = defaultHead;
+      exports["default"] = void 0;
+
+      var _react = _interopRequireWildcard(__webpack_require__(7294));
+
+      var _sideEffect = _interopRequireDefault(__webpack_require__(9263));
+
+      var _ampContext = __webpack_require__(2698);
+
+      var _headManagerContext = __webpack_require__(5203);
+
+      var _amp = __webpack_require__(4783);
+
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+
+      function _interopRequireWildcard(obj) {
+        if (obj && obj.__esModule) {
+          return obj;
+        } else {
+          var newObj = {};
+
+          if (obj != null) {
+            for (var key in obj) {
+              if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                var desc =
+                  Object.defineProperty && Object.getOwnPropertyDescriptor
+                    ? Object.getOwnPropertyDescriptor(obj, key)
+                    : {};
+
+                if (desc.get || desc.set) {
+                  Object.defineProperty(newObj, key, desc);
+                } else {
+                  newObj[key] = obj[key];
+                }
+              }
+            }
+          }
+
+          newObj["default"] = obj;
+          return newObj;
+        }
+      }
+
+      function defaultHead() {
+        var inAmpMode =
+          arguments.length > 0 && arguments[0] !== undefined
+            ? arguments[0]
+            : false;
+        var head = [
+          /*#__PURE__*/ _react["default"].createElement("meta", {
+            charSet: "utf-8"
+          })
+        ];
+
+        if (!inAmpMode) {
+          head.push(
+            /*#__PURE__*/ _react["default"].createElement("meta", {
+              name: "viewport",
+              content: "width=device-width"
+            })
+          );
+        }
+
+        return head;
+      }
+
+      function onlyReactElement(list, child) {
+        // React children can be "string" or "number" in this case we ignore them for backwards compat
+        if (typeof child === "string" || typeof child === "number") {
+          return list;
+        } // Adds support for React.Fragment
+
+        if (child.type === _react["default"].Fragment) {
+          return list.concat(
+            _react["default"].Children.toArray(child.props.children).reduce(
+              function(fragmentList, fragmentChild) {
+                if (
+                  typeof fragmentChild === "string" ||
+                  typeof fragmentChild === "number"
+                ) {
+                  return fragmentList;
+                }
+
+                return fragmentList.concat(fragmentChild);
+              },
+              []
+            )
+          );
+        }
+
+        return list.concat(child);
+      }
+
+      var METATYPES = ["name", "httpEquiv", "charSet", "itemProp"];
+      /*
+ returns a function for filtering head child elements
+ which shouldn't be duplicated, like <title/>
+ Also adds support for deduplicated `key` properties
+*/
+
+      function unique() {
+        var keys = new Set();
+        var tags = new Set();
+        var metaTypes = new Set();
+        var metaCategories = {};
+        return function(h) {
+          var isUnique = true;
+          var hasKey = false;
+
+          if (h.key && typeof h.key !== "number" && h.key.indexOf("$") > 0) {
+            hasKey = true;
+            var key = h.key.slice(h.key.indexOf("$") + 1);
+
+            if (keys.has(key)) {
+              isUnique = false;
+            } else {
+              keys.add(key);
+            }
+          } // eslint-disable-next-line default-case
+
+          switch (h.type) {
+            case "title":
+            case "base":
+              if (tags.has(h.type)) {
+                isUnique = false;
+              } else {
+                tags.add(h.type);
+              }
+
+              break;
+
+            case "meta":
+              for (var i = 0, len = METATYPES.length; i < len; i++) {
+                var metatype = METATYPES[i];
+                if (!h.props.hasOwnProperty(metatype)) continue;
+
+                if (metatype === "charSet") {
+                  if (metaTypes.has(metatype)) {
+                    isUnique = false;
+                  } else {
+                    metaTypes.add(metatype);
+                  }
+                } else {
+                  var category = h.props[metatype];
+                  var categories = metaCategories[metatype] || new Set();
+
+                  if (
+                    (metatype !== "name" || !hasKey) &&
+                    categories.has(category)
+                  ) {
+                    isUnique = false;
+                  } else {
+                    categories.add(category);
+                    metaCategories[metatype] = categories;
+                  }
+                }
+              }
+
+              break;
+          }
+
+          return isUnique;
+        };
+      }
+      /**
+       *
+       * @param headElements List of multiple <Head> instances
+       */
+
+      function reduceComponents(headElements, props) {
+        return headElements
+          .reduce(function(list, headElement) {
+            var headElementChildren = _react["default"].Children.toArray(
+              headElement.props.children
+            );
+
+            return list.concat(headElementChildren);
+          }, [])
+          .reduce(onlyReactElement, [])
+          .reverse()
+          .concat(defaultHead(props.inAmpMode))
+          .filter(unique())
+          .reverse()
+          .map(function(c, i) {
+            var key = c.key || i;
+
+            if (true && !props.inAmpMode) {
+              if (
+                c.type === "link" &&
+                c.props["href"] && // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
+                [
+                  "https://fonts.googleapis.com/css",
+                  "https://use.typekit.net/"
+                ].some(function(url) {
+                  return c.props["href"].startsWith(url);
+                })
+              ) {
+                var newProps = _objectSpread({}, c.props || {});
+
+                newProps["data-href"] = newProps["href"];
+                newProps["href"] = undefined; // Add this attribute to make it easy to identify optimized tags
+
+                newProps["data-optimized-fonts"] = true;
+                return /*#__PURE__*/ _react["default"].cloneElement(
+                  c,
+                  newProps
+                );
+              }
+            }
+
+            return /*#__PURE__*/ _react["default"].cloneElement(c, {
+              key: key
+            });
+          });
+      }
+      /**
+       * This component injects elements to `<head>` of your page.
+       * To avoid duplicated `tags` in `<head>` you can use the `key` property, which will make sure every tag is only rendered once.
+       */
+
+      function Head(_ref) {
+        var children = _ref.children;
+        var ampState = (0, _react).useContext(_ampContext.AmpStateContext);
+        var headManager = (0, _react).useContext(
+          _headManagerContext.HeadManagerContext
+        );
+        return /*#__PURE__*/ _react["default"].createElement(
+          _sideEffect["default"],
+          {
+            reduceComponentsToState: reduceComponents,
+            headManager: headManager,
+            inAmpMode: (0, _amp).isInAmpMode(ampState)
+          },
+          children
+        );
+      }
+
+      var _default = Head;
+      exports["default"] = _default;
+
+      /***/
+    },
+
+    /***/ 9263: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      var _toConsumableArray = __webpack_require__(319);
+
+      var _classCallCheck = __webpack_require__(4575);
+
+      var _createClass = __webpack_require__(3913);
+
+      var _assertThisInitialized = __webpack_require__(1506);
+
+      var _inherits = __webpack_require__(2205);
+
+      var _possibleConstructorReturn = __webpack_require__(8585);
+
+      var _getPrototypeOf = __webpack_require__(9754);
+
+      function _createSuper(Derived) {
+        var hasNativeReflectConstruct = _isNativeReflectConstruct();
+        return function _createSuperInternal() {
+          var Super = _getPrototypeOf(Derived),
+            result;
+          if (hasNativeReflectConstruct) {
+            var NewTarget = _getPrototypeOf(this).constructor;
+            result = Reflect.construct(Super, arguments, NewTarget);
+          } else {
+            result = Super.apply(this, arguments);
+          }
+          return _possibleConstructorReturn(this, result);
+        };
+      }
+
+      function _isNativeReflectConstruct() {
+        if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+        if (Reflect.construct.sham) return false;
+        if (typeof Proxy === "function") return true;
+        try {
+          Boolean.prototype.valueOf.call(
+            Reflect.construct(Boolean, [], function() {})
+          );
+          return true;
+        } catch (e) {
+          return false;
+        }
+      }
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports["default"] = void 0;
+
+      var _react = _interopRequireWildcard(__webpack_require__(7294));
+
+      function _interopRequireWildcard(obj) {
+        if (obj && obj.__esModule) {
+          return obj;
+        } else {
+          var newObj = {};
+
+          if (obj != null) {
+            for (var key in obj) {
+              if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                var desc =
+                  Object.defineProperty && Object.getOwnPropertyDescriptor
+                    ? Object.getOwnPropertyDescriptor(obj, key)
+                    : {};
+
+                if (desc.get || desc.set) {
+                  Object.defineProperty(newObj, key, desc);
+                } else {
+                  newObj[key] = obj[key];
+                }
+              }
+            }
+          }
+
+          newObj["default"] = obj;
+          return newObj;
+        }
+      }
+
+      var isServer = false;
+
+      var _class = /*#__PURE__*/ (function(_react$Component) {
+        _inherits(_class, _react$Component);
+
+        var _super = _createSuper(_class);
+
+        function _class(props) {
+          var _this;
+
+          _classCallCheck(this, _class);
+
+          _this = _super.call(this, props);
+
+          _this.emitChange = function() {
+            if (_this._hasHeadManager) {
+              _this.props.headManager.updateHead(
+                _this.props.reduceComponentsToState(
+                  _toConsumableArray(_this.props.headManager.mountedInstances),
+                  _this.props
+                )
+              );
+            }
+          };
+
+          _this._hasHeadManager =
+            _this.props.headManager && _this.props.headManager.mountedInstances;
+
+          if (isServer && _this._hasHeadManager) {
+            _this.props.headManager.mountedInstances.add(
+              _assertThisInitialized(_this)
+            );
+
+            _this.emitChange();
+          }
+
+          return _this;
+        }
+
+        _createClass(_class, [
+          {
+            key: "componentDidMount",
+            value: function componentDidMount() {
+              if (this._hasHeadManager) {
+                this.props.headManager.mountedInstances.add(this);
+              }
+
+              this.emitChange();
+            }
+          },
+          {
+            key: "componentDidUpdate",
+            value: function componentDidUpdate() {
+              this.emitChange();
+            }
+          },
+          {
+            key: "componentWillUnmount",
+            value: function componentWillUnmount() {
+              if (this._hasHeadManager) {
+                this.props.headManager.mountedInstances["delete"](this);
+              }
+
+              this.emitChange();
+            }
+          },
+          {
+            key: "render",
+            value: function render() {
+              return null;
+            }
+          }
+        ]);
+
+        return _class;
+      })(_react.Component);
+
+      exports["default"] = _class;
+
+      /***/
+    },
+
     /***/ 8488: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
Diff for image-HASH.js
@@ -1,6 +1,106 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [358],
   {
+    /***/ 3646: /***/ function(
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      var arrayLikeToArray = __webpack_require__(7228);
+
+      function _arrayWithoutHoles(arr) {
+        if (Array.isArray(arr)) return arrayLikeToArray(arr);
+      }
+
+      module.exports = _arrayWithoutHoles;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 9713: /***/ function(module) {
+      function _defineProperty(obj, key, value) {
+        if (key in obj) {
+          Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+          });
+        } else {
+          obj[key] = value;
+        }
+
+        return obj;
+      }
+
+      module.exports = _defineProperty;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 6860: /***/ function(module) {
+      function _iterableToArray(iter) {
+        if (
+          (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null) ||
+          iter["@@iterator"] != null
+        )
+          return Array.from(iter);
+      }
+
+      module.exports = _iterableToArray;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 8206: /***/ function(module) {
+      function _nonIterableSpread() {
+        throw new TypeError(
+          "Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
+        );
+      }
+
+      module.exports = _nonIterableSpread;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
+    /***/ 319: /***/ function(
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      var arrayWithoutHoles = __webpack_require__(3646);
+
+      var iterableToArray = __webpack_require__(6860);
+
+      var unsupportedIterableToArray = __webpack_require__(379);
+
+      var nonIterableSpread = __webpack_require__(8206);
+
+      function _toConsumableArray(arr) {
+        return (
+          arrayWithoutHoles(arr) ||
+          iterableToArray(arr) ||
+          unsupportedIterableToArray(arr) ||
+          nonIterableSpread()
+        );
+      }
+
+      module.exports = _toConsumableArray;
+      (module.exports["default"] = module.exports),
+        (module.exports.__esModule = true);
+
+      /***/
+    },
+
     /***/ 1504: /***/ function(
       __unused_webpack_module,
       exports,
@@ -925,6 +1025,555 @@
       /***/
     },
 
+    /***/ 2698: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.AmpStateContext = void 0;
+
+      var _react = _interopRequireDefault(__webpack_require__(7294));
+
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+
+      var AmpStateContext = _react["default"].createContext({});
+
+      exports.AmpStateContext = AmpStateContext;
+
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 4783: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.isInAmpMode = isInAmpMode;
+      exports.useAmp = useAmp;
+
+      var _react = _interopRequireDefault(__webpack_require__(7294));
+
+      var _ampContext = __webpack_require__(2698);
+
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+
+      function isInAmpMode() {
+        var _ref =
+            arguments.length > 0 && arguments[0] !== undefined
+              ? arguments[0]
+              : {},
+          _ref$ampFirst = _ref.ampFirst,
+          ampFirst = _ref$ampFirst === void 0 ? false : _ref$ampFirst,
+          _ref$hybrid = _ref.hybrid,
+          hybrid = _ref$hybrid === void 0 ? false : _ref$hybrid,
+          _ref$hasQuery = _ref.hasQuery,
+          hasQuery = _ref$hasQuery === void 0 ? false : _ref$hasQuery;
+
+        return ampFirst || (hybrid && hasQuery);
+      }
+
+      function useAmp() {
+        // Don't assign the context value to a variable to save bytes
+        return isInAmpMode(
+          _react["default"].useContext(_ampContext.AmpStateContext)
+        );
+      }
+
+      /***/
+    },
+
+    /***/ 7006: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      var _defineProperty = __webpack_require__(9713);
+
+      function ownKeys(object, enumerableOnly) {
+        var keys = Object.keys(object);
+        if (Object.getOwnPropertySymbols) {
+          var symbols = Object.getOwnPropertySymbols(object);
+          if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+              return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+          }
+          keys.push.apply(keys, symbols);
+        }
+        return keys;
+      }
+
+      function _objectSpread(target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i] != null ? arguments[i] : {};
+          if (i % 2) {
+            ownKeys(Object(source), true).forEach(function(key) {
+              _defineProperty(target, key, source[key]);
+            });
+          } else if (Object.getOwnPropertyDescriptors) {
+            Object.defineProperties(
+              target,
+              Object.getOwnPropertyDescriptors(source)
+            );
+          } else {
+            ownKeys(Object(source)).forEach(function(key) {
+              Object.defineProperty(
+                target,
+                key,
+                Object.getOwnPropertyDescriptor(source, key)
+              );
+            });
+          }
+        }
+        return target;
+      }
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.defaultHead = defaultHead;
+      exports["default"] = void 0;
+
+      var _react = _interopRequireWildcard(__webpack_require__(7294));
+
+      var _sideEffect = _interopRequireDefault(__webpack_require__(9263));
+
+      var _ampContext = __webpack_require__(2698);
+
+      var _headManagerContext = __webpack_require__(5203);
+
+      var _amp = __webpack_require__(4783);
+
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+
+      function _interopRequireWildcard(obj) {
+        if (obj && obj.__esModule) {
+          return obj;
+        } else {
+          var newObj = {};
+
+          if (obj != null) {
+            for (var key in obj) {
+              if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                var desc =
+                  Object.defineProperty && Object.getOwnPropertyDescriptor
+                    ? Object.getOwnPropertyDescriptor(obj, key)
+                    : {};
+
+                if (desc.get || desc.set) {
+                  Object.defineProperty(newObj, key, desc);
+                } else {
+                  newObj[key] = obj[key];
+                }
+              }
+            }
+          }
+
+          newObj["default"] = obj;
+          return newObj;
+        }
+      }
+
+      function defaultHead() {
+        var inAmpMode =
+          arguments.length > 0 && arguments[0] !== undefined
+            ? arguments[0]
+            : false;
+        var head = [
+          /*#__PURE__*/ _react["default"].createElement("meta", {
+            charSet: "utf-8"
+          })
+        ];
+
+        if (!inAmpMode) {
+          head.push(
+            /*#__PURE__*/ _react["default"].createElement("meta", {
+              name: "viewport",
+              content: "width=device-width"
+            })
+          );
+        }
+
+        return head;
+      }
+
+      function onlyReactElement(list, child) {
+        // React children can be "string" or "number" in this case we ignore them for backwards compat
+        if (typeof child === "string" || typeof child === "number") {
+          return list;
+        } // Adds support for React.Fragment
+
+        if (child.type === _react["default"].Fragment) {
+          return list.concat(
+            _react["default"].Children.toArray(child.props.children).reduce(
+              function(fragmentList, fragmentChild) {
+                if (
+                  typeof fragmentChild === "string" ||
+                  typeof fragmentChild === "number"
+                ) {
+                  return fragmentList;
+                }
+
+                return fragmentList.concat(fragmentChild);
+              },
+              []
+            )
+          );
+        }
+
+        return list.concat(child);
+      }
+
+      var METATYPES = ["name", "httpEquiv", "charSet", "itemProp"];
+      /*
+ returns a function for filtering head child elements
+ which shouldn't be duplicated, like <title/>
+ Also adds support for deduplicated `key` properties
+*/
+
+      function unique() {
+        var keys = new Set();
+        var tags = new Set();
+        var metaTypes = new Set();
+        var metaCategories = {};
+        return function(h) {
+          var isUnique = true;
+          var hasKey = false;
+
+          if (h.key && typeof h.key !== "number" && h.key.indexOf("$") > 0) {
+            hasKey = true;
+            var key = h.key.slice(h.key.indexOf("$") + 1);
+
+            if (keys.has(key)) {
+              isUnique = false;
+            } else {
+              keys.add(key);
+            }
+          } // eslint-disable-next-line default-case
+
+          switch (h.type) {
+            case "title":
+            case "base":
+              if (tags.has(h.type)) {
+                isUnique = false;
+              } else {
+                tags.add(h.type);
+              }
+
+              break;
+
+            case "meta":
+              for (var i = 0, len = METATYPES.length; i < len; i++) {
+                var metatype = METATYPES[i];
+                if (!h.props.hasOwnProperty(metatype)) continue;
+
+                if (metatype === "charSet") {
+                  if (metaTypes.has(metatype)) {
+                    isUnique = false;
+                  } else {
+                    metaTypes.add(metatype);
+                  }
+                } else {
+                  var category = h.props[metatype];
+                  var categories = metaCategories[metatype] || new Set();
+
+                  if (
+                    (metatype !== "name" || !hasKey) &&
+                    categories.has(category)
+                  ) {
+                    isUnique = false;
+                  } else {
+                    categories.add(category);
+                    metaCategories[metatype] = categories;
+                  }
+                }
+              }
+
+              break;
+          }
+
+          return isUnique;
+        };
+      }
+      /**
+       *
+       * @param headElements List of multiple <Head> instances
+       */
+
+      function reduceComponents(headElements, props) {
+        return headElements
+          .reduce(function(list, headElement) {
+            var headElementChildren = _react["default"].Children.toArray(
+              headElement.props.children
+            );
+
+            return list.concat(headElementChildren);
+          }, [])
+          .reduce(onlyReactElement, [])
+          .reverse()
+          .concat(defaultHead(props.inAmpMode))
+          .filter(unique())
+          .reverse()
+          .map(function(c, i) {
+            var key = c.key || i;
+
+            if (true && !props.inAmpMode) {
+              if (
+                c.type === "link" &&
+                c.props["href"] && // TODO(prateekbh@): Replace
Post job cleanup.
[command]/usr/bin/git version
git version 2.33.0
[command]/usr/bin/git config --local --name-only --get-regexp core\.sshCommand
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'core\.sshCommand' && git config --local --unset-all 'core.sshCommand' || :
[command]/usr/bin/git config --local --name-only --get-regexp http\.https\:\/\/github\.com\/\.extraheader
http.https://github.com/.extraheader
[command]/usr/bin/git config --local --unset-all http.https://github.com/.extraheader
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'http\.https\:\/\/github\.com\/\.extraheader' && git config --local --unset-all 'http.https://github.com/.extraheader' || :
Cleaning up orphan processes
Commit: 90c9b4c7030398e9e2af4e963626196599d7bc35

@ijjk
Copy link
Member

ijjk commented Oct 16, 2021

Failing test suites

Commit: 90c9b4c

test/development/basic-basepath/hmr.test.ts

  • basic HMR > Error Recovery > should recover after a bad return from the render function
  • basic HMR > Error Recovery > should recover after undefined exported as default
Expand output

● basic HMR › Error Recovery › should recover after a bad return from the render function

TIMED OUT: /This is the about page/

  437 |
  438 |   if (hardError) {
> 439 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  440 |   }
  441 |   return false
  442 | }

  at Object.check (lib/next-test-utils.js:439:11)
  at Object.<anonymous> (development/basic-basepath/hmr.test.ts:561:9)

● basic HMR › Error Recovery › should recover after undefined exported as default

TIMED OUT: /This is the about page/

  437 |
  438 |   if (hardError) {
> 439 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  440 |   }
  441 |   return false
  442 | }

  at Object.check (lib/next-test-utils.js:439:11)
  at Object.<anonymous> (development/basic-basepath/hmr.test.ts:617:8)

@timneutkens timneutkens merged commit 7e37013 into vercel:canary Oct 16, 2021
@timneutkens timneutkens deleted the add/import-config branch October 16, 2021 12:22
kodiakhq bot pushed a commit that referenced this pull request Oct 16, 2021
Follow-up to #29935 this fixes the failing tests on Azure as it seems the `import()` needs to be prefixed with `file://` on Windows or an error is thrown. It also disables the config unit tests since a dynamic import inside of `jest` on either an m1 on macOS or Windows using node 14 causes a segfault from being used inside of `vm`. 

<details>

<summary>segfault error in jest</summary>

<img width="962" alt="Screen Shot 2021-10-15 at 16 45 04" src="https://user-images.githubusercontent.com/22380829/137596819-072233e3-1a45-445f-a3dd-c03ec62fb4ce.png">

</details>


<details>

<summary>Windows absolute import error</summary>


<img width="1114" alt="Screen Shot 2021-10-16 at 12 45 59" src="https://user-images.githubusercontent.com/22380829/137597185-200f3164-7f79-488f-acc9-6c812ce5bc4a.png">

</details>
christiankaindl added a commit to christiankaindl/LYTS-website that referenced this pull request Jan 17, 2022
The .mjs format allows us to use regular imports in the config file, which was a requirement for the remark-frontmatter plugin.
See vercel/next.js#9607
and vercel/next.js#29935

The custom frontmatter plugin injects a getStaticProps() function into the AST to make the frontmatter metadata available to the page.
See mdx-js/mdx#1896
@vercel vercel locked as resolved and limited conversation to collaborators Jan 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants