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.

Sign up for GitHub

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

Jump to bottom

Add StrictMode toggle #9161

Merged
merged 3 commits into from
Oct 25, 2019
Merged

Add StrictMode toggle #9161

merged 3 commits into from
Oct 25, 2019

Conversation

devknoll
Copy link
Contributor

@devknoll devknoll commented Oct 22, 2019 •
edited by timneutkens
Loading

Ref https://github.com/zeit/next-roadmap/issues/142

Renders apps in <React.StrictMode /> for development warnings. Defaults to true since StrictMode is the preferred path forward, but it can be disabled by adding strictMode: false to next.config.json.

@ijjk
Copy link
Member

ijjk commented Oct 22, 2019

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary devknoll/next.js strict-mode-option Change
buildDuration 15.3s 15.1s -175ms
nodeModulesSize 48.7 MB 48.7 MB ⚠️ +437 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
zeit/next.js canary devknoll/next.js strict-mode-option Change
main-HASH.js 18.9 kB 19 kB ⚠️ +57 B
main-HASH.js gzip 6.79 kB 6.81 kB ⚠️ +17 B
webpack-HASH.js 1.53 kB 1.53 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
16b1a7225520..4a7b46563.js 14.9 kB 14.9 kB ✓
16b1a7225520..6563.js gzip 5.38 kB 5.38 kB ✓
4952ddcd88e7..bfe360fe6.js 10.5 kB 10.5 kB ✓
4952ddcd88e7..0fe6.js gzip 4.06 kB 4.06 kB ✓
commons.HASH.js 11.3 kB 11.3 kB ✓
commons.HASH.js gzip 4.23 kB 4.23 kB ✓
de003c3a9d30..9e9c1d310.js 28.6 kB 28.6 kB ✓
de003c3a9d30..d310.js gzip 10.8 kB 10.8 kB ✓
framework.1b..cdcfe1283.js 125 kB 125 kB ✓
framework.1b..1283.js gzip 39.4 kB 39.4 kB ✓
Overall change 211 kB 211 kB ⚠️ +57 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
zeit/next.js canary devknoll/next.js strict-mode-option Change
main-HASH.module.js 17.2 kB 17.2 kB ⚠️ +61 B
main-HASH.module.js gzip 6.53 kB 6.54 kB ⚠️ +13 B
webpack-HASH.module.js 1.53 kB 1.53 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
16b1a7225520..d2.module.js 10.8 kB 10.8 kB ✓
16b1a7225520..dule.js gzip 4.05 kB 4.05 kB ✓
4952ddcd88e7..4a.module.js 12.8 kB 12.8 kB ✓
4952ddcd88e7..dule.js gzip 4.75 kB 4.75 kB ✓
de003c3a9d30..11.module.js 22.1 kB 22.1 kB ✓
de003c3a9d30..dule.js gzip 8.68 kB 8.68 kB ✓
framework.5b..d3.module.js 125 kB 125 kB ✓
framework.5b..dule.js gzip 39.4 kB 39.4 kB ✓
Overall change 190 kB 190 kB ⚠️ +61 B
Client Pages
zeit/next.js canary devknoll/next.js strict-mode-option Change
_app.js 1.63 kB 1.63 kB ✓
_app.js gzip 788 B 788 B ✓
_error.js 12.3 kB 12.3 kB ✓
_error.js gzip 4.79 kB 4.79 kB ✓
hooks.js 1.51 kB 1.51 kB ✓
hooks.js gzip 789 B 789 B ✓
index.js 318 B 318 B ✓
index.js gzip 222 B 222 B ✓
link.js 8.15 kB 8.15 kB ✓
link.js gzip 3.5 kB 3.5 kB ✓
routerDirect.js 413 B 413 B ✓
routerDirect.js gzip 285 B 285 B ✓
withRouter.js 423 B 423 B ✓
withRouter.js gzip 284 B 284 B ✓
Overall change 24.7 kB 24.7 kB ✓
Client Pages Modern
zeit/next.js canary devknoll/next.js strict-mode-option Change
_app.module.js 1.54 kB 1.54 kB ✓
_app.module.js gzip 756 B 756 B ✓
_error.module.js 10.6 kB 10.6 kB ✓
_error.module.js gzip 4.28 kB 4.28 kB ✓
hooks.module.js 1.52 kB 1.52 kB ✓
hooks.module.js gzip 794 B 794 B ✓
index.module.js 294 B 294 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js 8.53 kB 8.53 kB ✓
link.module.js gzip 3.69 kB 3.69 kB ✓
routerDirect.module.js 399 B 399 B ✓
routerDirect..dule.js gzip 285 B 285 B ✓
withRouter.module.js 409 B 409 B ✓
withRouter.m..dule.js gzip 282 B 282 B ✓
Overall change 23.3 kB 23.3 kB ✓
Client Build Manifests
zeit/next.js canary devknoll/next.js strict-mode-option Change
_buildManifest.js 244 B 244 B ✓
_buildManifest.js gzip 200 B 200 B ✓
_buildManifest.module.js 251 B 251 B ✓
_buildManife..dule.js gzip 209 B 209 B ✓
Overall change 495 B 495 B ✓
Rendered Page Sizes
zeit/next.js canary devknoll/next.js strict-mode-option Change
index.html 3.94 kB 3.94 kB ✓
index.html gzip 1 kB 1 kB ⚠️ +4 B
link.html 4.47 kB 4.47 kB ✓
link.html gzip 1.08 kB 1.08 kB ⚠️ +4 B
withRouter.html 4.47 kB 4.47 kB ✓
withRouter.html gzip 1.07 kB 1.07 kB ⚠️ +4 B
Overall change 12.9 kB 12.9 kB ✓

Diffs

Diff for main-HASH.js 
@@ -848,7 +848,7 @@ function _doRender() {
   _doRender = (0, _asyncToGenerator2["default"])(
   /*#__PURE__*/
   _regeneratorRuntime.mark(function _callee4(_ref6) {
-    var App, Component, props, err, _router2, pathname, _query, _asPath, AppTree, appCtx, appProps;
+    var App, Component, props, err, _router2, pathname, _query, _asPath, AppTree, appCtx, appProps, elem;
 
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) {
@@ -896,16 +896,17 @@ function _doRender() {
               Component: Component,
               ErrorComponent: ErrorComponent,
               appProps: appProps
-            }); // We catch runtime errors using componentDidCatch which will trigger renderError
+            });
+            elem = _react["default"].createElement(AppContainer, null, _react["default"].createElement(App, appProps)); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-            renderReactElement(_react["default"].createElement(AppContainer, null, _react["default"].createElement(App, appProps)), appElement);
+            renderReactElement( true ? _react["default"].createElement(_react["default"].StrictMode, null, elem) : undefined, appElement);
             emitter.emit('after-reactdom-render', {
               Component: Component,
               ErrorComponent: ErrorComponent,
               appProps: appProps
             });
 
-          case 15:
+          case 16:
           case "end":
             return _context4.stop();
         }
Diff for main-HASH.module.js 
@@ -811,9 +811,12 @@ function _doRender() {
       Component,
       ErrorComponent,
       appProps
-    }); // We catch runtime errors using componentDidCatch which will trigger renderError
+    });
+
+    const elem = _react.default.createElement(AppContainer, null, _react.default.createElement(App, appProps)); // We catch runtime errors using componentDidCatch which will trigger renderError
+
 
-    renderReactElement(_react.default.createElement(AppContainer, null, _react.default.createElement(App, appProps)), appElement);
+    renderReactElement( true ? _react.default.createElement(_react.default.StrictMode, null, elem) : undefined, appElement);
     emitter.emit('after-reactdom-render', {
       Component,
       ErrorComponent,
Diff for index.html 
@@ -12,7 +12,7 @@
         as="script" crossorigin="anonymous" />
         <link rel="preload" href="/_next/static/runtime/webpack-7928590be3ef2e55b835.module.js"
         as="script" crossorigin="anonymous" />
-        <link rel="preload" href="/_next/static/runtime/main-e28bfaa83b9b757c5b6b.module.js"
+        <link rel="preload" href="/_next/static/runtime/main-d35335b36f732785ff1c.module.js"
         as="script" crossorigin="anonymous" />
         <link rel="preload" href="/_next/static/chunks/framework.cdb73e402d876d4ac87f.module.js"
         as="script" crossorigin="anonymous" />
@@ -43,9 +43,9 @@
         async="" crossorigin="anonymous" nomodule=""></script>
         <script src="/_next/static/runtime/webpack-7928590be3ef2e55b835.module.js"
         async="" crossorigin="anonymous" type="module"></script>
-        <script src="/_next/static/runtime/main-d4b70238a0f0ad1d04a6.js"
+        <script src="/_next/static/runtime/main-65fc3c8edb9739d85531.js"
         async="" crossorigin="anonymous" nomodule=""></script>
-        <script src="/_next/static/runtime/main-e28bfaa83b9b757c5b6b.module.js"
+        <script src="/_next/static/runtime/main-d35335b36f732785ff1c.module.js"
         async="" crossorigin="anonymous" type="module"></script>
         <script src="/_next/static/chunks/framework.219514909c9db8a9ff76.js"
         async="" crossorigin="anonymous" nomodule=""></script>
Diff for link.html 
@@ -20,7 +20,7 @@
         as="script" crossorigin="anonymous" />
         <link rel="preload" href="/_next/static/chunks/16b1a72255206b7853bf6603dc58ec83de39b142.1ab508e424ce83e585d1.module.js"
         as="script" crossorigin="anonymous" />
-        <link rel="preload" href="/_next/static/runtime/main-e28bfaa83b9b757c5b6b.module.js"
+        <link rel="preload" href="/_next/static/runtime/main-d35335b36f732785ff1c.module.js"
         as="script" crossorigin="anonymous" />
     </head>
     
@@ -66,9 +66,9 @@
         async="" crossorigin="anonymous" nomodule=""></script>
         <script src="/_next/static/chunks/16b1a72255206b7853bf6603dc58ec83de39b142.1ab508e424ce83e585d1.module.js"
         async="" crossorigin="anonymous" type="module"></script>
-        <script src="/_next/static/runtime/main-d4b70238a0f0ad1d04a6.js"
+        <script src="/_next/static/runtime/main-65fc3c8edb9739d85531.js"
         async="" crossorigin="anonymous" nomodule=""></script>
-        <script src="/_next/static/runtime/main-e28bfaa83b9b757c5b6b.module.js"
+        <script src="/_next/static/runtime/main-d35335b36f732785ff1c.module.js"
         async="" crossorigin="anonymous" type="module"></script>
         <script src="/_next/static/BUILD_ID/_buildManifest.js" async=""
         crossorigin="anonymous" nomodule=""></script>
Diff for withRouter.html 
@@ -20,7 +20,7 @@
         as="script" crossorigin="anonymous" />
         <link rel="preload" href="/_next/static/chunks/16b1a72255206b7853bf6603dc58ec83de39b142.1ab508e424ce83e585d1.module.js"
         as="script" crossorigin="anonymous" />
-        <link rel="preload" href="/_next/static/runtime/main-e28bfaa83b9b757c5b6b.module.js"
+        <link rel="preload" href="/_next/static/runtime/main-d35335b36f732785ff1c.module.js"
         as="script" crossorigin="anonymous" />
     </head>
     
@@ -64,9 +64,9 @@
         async="" crossorigin="anonymous" nomodule=""></script>
         <script src="/_next/static/chunks/16b1a72255206b7853bf6603dc58ec83de39b142.1ab508e424ce83e585d1.module.js"
         async="" crossorigin="anonymous" type="module"></script>
-        <script src="/_next/static/runtime/main-d4b70238a0f0ad1d04a6.js"
+        <script src="/_next/static/runtime/main-65fc3c8edb9739d85531.js"
         async="" crossorigin="anonymous" nomodule=""></script>
-        <script src="/_next/static/runtime/main-e28bfaa83b9b757c5b6b.module.js"
+        <script src="/_next/static/runtime/main-d35335b36f732785ff1c.module.js"
         async="" crossorigin="anonymous" type="module"></script>
         <script src="/_next/static/BUILD_ID/_buildManifest.js" async=""
         crossorigin="anonymous" nomodule=""></script>
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary devknoll/next.js strict-mode-option Change
buildDuration 15.4s 16s ⚠️ +581ms
nodeModulesSize 48.7 MB 48.7 MB ⚠️ +437 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
zeit/next.js canary devknoll/next.js strict-mode-option Change
main-HASH.js 18.9 kB 19 kB ⚠️ +57 B
main-HASH.js gzip 6.79 kB 6.81 kB ⚠️ +17 B
webpack-HASH.js 1.53 kB 1.53 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
16b1a7225520..4a7b46563.js 14.9 kB 14.9 kB ✓
16b1a7225520..6563.js gzip 5.38 kB 5.38 kB ✓
4952ddcd88e7..bfe360fe6.js 10.5 kB 10.5 kB ✓
4952ddcd88e7..0fe6.js gzip 4.06 kB 4.06 kB ✓
commons.HASH.js 11.3 kB 11.3 kB ✓
commons.HASH.js gzip 4.23 kB 4.23 kB ✓
de003c3a9d30..9e9c1d310.js 28.6 kB 28.6 kB ✓
de003c3a9d30..d310.js gzip 10.8 kB 10.8 kB ✓
framework.1b..cdcfe1283.js 125 kB 125 kB ✓
framework.1b..1283.js gzip 39.4 kB 39.4 kB ✓
Overall change 211 kB 211 kB ⚠️ +57 B
Client Bundles (main, webpack, commons) Modern Overall increase ⚠️
zeit/next.js canary devknoll/next.js strict-mode-option Change
main-HASH.module.js 17.2 kB 17.2 kB ⚠️ +61 B
main-HASH.module.js gzip 6.53 kB 6.54 kB ⚠️ +13 B
webpack-HASH.module.js 1.53 kB 1.53 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
16b1a7225520..d2.module.js 10.8 kB 10.8 kB ✓
16b1a7225520..dule.js gzip 4.05 kB 4.05 kB ✓
4952ddcd88e7..4a.module.js 12.8 kB 12.8 kB ✓
4952ddcd88e7..dule.js gzip 4.75 kB 4.75 kB ✓
de003c3a9d30..11.module.js 22.1 kB 22.1 kB ✓
de003c3a9d30..dule.js gzip 8.68 kB 8.68 kB ✓
framework.5b..d3.module.js 125 kB 125 kB ✓
framework.5b..dule.js gzip 39.4 kB 39.4 kB ✓
Overall change 190 kB 190 kB ⚠️ +61 B
Client Pages
zeit/next.js canary devknoll/next.js strict-mode-option Change
_app.js 1.63 kB 1.63 kB ✓
_app.js gzip 788 B 788 B ✓
_error.js 12.3 kB 12.3 kB ✓
_error.js gzip 4.79 kB 4.79 kB ✓
hooks.js 1.51 kB 1.51 kB ✓
hooks.js gzip 789 B 789 B ✓
index.js 318 B 318 B ✓
index.js gzip 222 B 222 B ✓
link.js 8.15 kB 8.15 kB ✓
link.js gzip 3.5 kB 3.5 kB ✓
routerDirect.js 413 B 413 B ✓
routerDirect.js gzip 285 B 285 B ✓
withRouter.js 423 B 423 B ✓
withRouter.js gzip 284 B 284 B ✓
Overall change 24.7 kB 24.7 kB ✓
Client Pages Modern
zeit/next.js canary devknoll/next.js strict-mode-option Change
_app.module.js 1.54 kB 1.54 kB ✓
_app.module.js gzip 756 B 756 B ✓
_error.module.js 10.6 kB 10.6 kB ✓
_error.module.js gzip 4.28 kB 4.28 kB ✓
hooks.module.js 1.52 kB 1.52 kB ✓
hooks.module.js gzip 794 B 794 B ✓
index.module.js 294 B 294 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js 8.53 kB 8.53 kB ✓
link.module.js gzip 3.69 kB 3.69 kB ✓
routerDirect.module.js 399 B 399 B ✓
routerDirect..dule.js gzip 285 B 285 B ✓
withRouter.module.js 409 B 409 B ✓
withRouter.m..dule.js gzip 282 B 282 B ✓
Overall change 23.3 kB 23.3 kB ✓
Client Build Manifests
zeit/next.js canary devknoll/next.js strict-mode-option Change
_buildManifest.js 244 B 244 B ✓
_buildManifest.js gzip 200 B 200 B ✓
_buildManifest.module.js 251 B 251 B ✓
_buildManife..dule.js gzip 209 B 209 B ✓
Overall change 495 B 495 B ✓
Serverless bundles
zeit/next.js canary devknoll/next.js strict-mode-option Change
_error.js 234 kB 234 kB ✓
_error.js gzip 62.8 kB 62.8 kB -2 B
hooks.html 4.08 kB 4.08 kB ✓
hooks.html gzip 1.03 kB 1.03 kB ⚠️ +2 B
index.js 235 kB 235 kB ✓
index.js gzip 62.9 kB 62.9 kB ✓
link.js 267 kB 267 kB ✓
link.js gzip 71.9 kB 71.9 kB -1 B
routerDirect.js 260 kB 260 kB ✓
routerDirect.js gzip 69.9 kB 69.9 kB ✓
withRouter.js 260 kB 260 kB ✓
withRouter.js gzip 69.8 kB 69.8 kB ✓
Overall change 1.26 MB 1.26 MB ✓

Commit: eefdfc4

timneutkens
timneutkens approved these changes Oct 25, 2019
View reviewed changes
Copy link
Member

@timneutkens timneutkens left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Made a few small tweaks to land the PR. We can switch to strict mode by default in a minor release imo.

@timneutkens timneutkens merged commit 4421448 into vercel:canary Oct 25, 2019
@timneutkens timneutkens mentioned this pull request Oct 28, 2019
Merged
@Timer Timer added this to the 9.1.2 milestone Oct 28, 2019
This was referenced Nov 12, 2019
Merged
Open
Open
Open
Merged
@snyk-bot snyk-bot mentioned this pull request Nov 25, 2019
Open
@vercel vercel locked as resolved and limited conversation to collaborators Jan 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@timneutkens timneutkens timneutkens approved these changes

@ijjk ijjk Awaiting requested review from ijjk

@lfades lfades Awaiting requested review from lfades

@Timer Timer Awaiting requested review from Timer

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
9.1.2
Development

Successfully merging this pull request may close these issues.
4 participants
@devknoll @ijjk @timneutkens @Timer