Fix with-msw example #17695

jensmeindertsma · 2020-10-07T17:10:22Z

When using the with-msw example I noticed it increased my bundle size in production, even through MSW is meant to be used in development only.

Build size before implementing MSW

Page                                                           Size     First Load JS
┌ λ /                                                          479 B          58.9 kB
├   /_app                                                      0 B            58.4 kB
└ ○ /404                                                       3.44 kB        61.9 kB
+ First Load JS shared by all                                  58.4 kB
  ├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.b1b405.js  10.3 kB
  ├ chunks/framework.cb05d5.js                                 39.9 kB
  ├ chunks/main.a140d5.js                                      7.28 kB
  ├ chunks/pages/_app.b90a57.js                                277 B
  └ chunks/webpack.e06743.js                                   751 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

Build size after implementing MSW according to the with-msw example

Page                                                           Size     First Load JS
┌ λ /                                                          479 B          71.6 kB
├   /_app                                                      0 B            71.1 kB
└ ○ /404                                                       3.44 kB        74.6 kB
+ First Load JS shared by all                                  71.1 kB
  ├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.b1b405.js  10.3 kB
  ├ chunks/framework.cb05d5.js                                 39.9 kB
  ├ chunks/main.a140d5.js                                      7.28 kB
  ├ chunks/pages/_app.c58a6f.js                                13 kB
  └ chunks/webpack.e06743.js                                   751 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

There was a 12.7 kB large increase in the _app First Load JS which increased the pages' First Load JS size. I tracked the problem down to the following code:

if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
  require('../mocks')
}

Removing this reduces the _app First Load JS to what it was previously. The NEXT_PUBLIC_API_MOCKING environment variable is defined in the .env.development file, as this means that Next.js will only activate MSW during development/testing, which is what MSW is intended for.

After discussing with @kettanaito, the author of MSW, I did some investigation. This dynamic require statement is intended to allow tree-shaking of the MSW package for production. Unfortunately this did not seem to be working. To fix this, I changed the code to the following:

if (process.env.NODE_ENV !== 'production') {
  require('../mocks')
}

This means I could remove the NEXT_PUBLIC_API_MOCKING environment variable from .env.development, as it is no longer used.

It is important to note that this still achieves the same functionality as before: MSW runs in development / testing, and not in production. If MSW must be enabled in production for some reason, the following code can be used to run MSW regardless of the environment:

if (true) {
  require('../mocks')
}

If possible, I'd love to hear from the Next.js maintainers regarding the tree-shaking process when using environment variables.

Lastly, I made the necessary changes to have the example work in production mode as well, because there is no real backend. Of course there is a comment explaining what should be changed in a real world app.

ijjk · 2020-10-07T17:20:06Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
buildDuration	12.6s	12.4s	-259ms
nodeModulesSize	63.2 MB	63.2 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.282	2.288	⚠️ +0.01
/ avg req/sec	1095.42	1092.8	⚠️ -2.62
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.294	1.18	-0.11
/error-in-render avg req/sec	1932.3	2117.97	+185.67

Client Bundles (main, webpack, commons)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-e5f5aee..31e1.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ff4dea7..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
buildDuration	13.9s	14.2s	⚠️ +284ms
nodeModulesSize	63.2 MB	63.2 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-e5f5aee..31e1.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ff4dea7..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_error.js	1.05 MB	1.05 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.05 MB	1.05 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.09 MB	1.09 MB	✓
withRouter.js	1.09 MB	1.09 MB	✓
Overall change	5.4 MB	5.4 MB	✓

Commit: 5192705

examples/with-msw/pages/_app.js

ijjk · 2020-10-08T15:41:54Z

Stats from current PR

Default Server Mode

General

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
buildDuration	13.2s	13.5s	⚠️ +276ms
nodeModulesSize	63.4 MB	63.4 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.618	2.592	-0.03
/ avg req/sec	954.98	964.44	+9.46
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.544	1.55	⚠️ +0.01
/error-in-render avg req/sec	1619.43	1612.75	⚠️ -6.68

Client Bundles (main, webpack, commons)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..9b19.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-310f69a..b28a.js gzip	7.23 kB	7.23 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58 kB	58 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-fbbf49e..dule.js gzip	6.29 kB	6.29 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
buildDuration	15.8s	15.3s	-508ms
nodeModulesSize	63.4 MB	63.4 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..9b19.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-310f69a..b28a.js gzip	7.23 kB	7.23 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58 kB	58 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-fbbf49e..dule.js gzip	6.29 kB	6.29 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_error.js	1.05 MB	1.05 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.05 MB	1.05 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.09 MB	1.09 MB	✓
withRouter.js	1.09 MB	1.09 MB	✓
Overall change	5.41 MB	5.41 MB	✓

Commit: f024229

ijjk · 2020-10-08T15:44:05Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
buildDuration	13.3s	13.4s	⚠️ +105ms
nodeModulesSize	63.4 MB	63.4 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.408	2.398	-0.01
/ avg req/sec	1038.2	1042.74	+4.54
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.302	1.292	-0.01
/error-in-render avg req/sec	1920.77	1935.56	+14.79

Client Bundles (main, webpack, commons)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..9b19.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-310f69a..b28a.js gzip	7.23 kB	7.23 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58 kB	58 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-fbbf49e..dule.js gzip	6.29 kB	6.29 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
buildDuration	14.7s	14.4s	-301ms
nodeModulesSize	63.4 MB	63.4 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..9b19.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-310f69a..b28a.js gzip	7.23 kB	7.23 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58 kB	58 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-fbbf49e..dule.js gzip	6.29 kB	6.29 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_error.js	1.05 MB	1.05 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.05 MB	1.05 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.09 MB	1.09 MB	✓
withRouter.js	1.09 MB	1.09 MB	✓
Overall change	5.41 MB	5.41 MB	✓

Commit: f2f8e42

kettanaito · 2020-10-08T15:53:25Z

examples/with-msw/pages/index.js

  const [reviews, setReviews] = useState(null)

  const handleGetReviews = () => {
    // Client-side request are mocked by `mocks/browser.js`.
+    // This request will fail in production, as MSW is only run in development.


This statement is not entirely true. It's run everywhere except production. Perhaps, we can drop this line altogether, and only mention that in production this request would hit the actual backend?

lfades

👋 Added my final review 🕵️

lfades · 2020-10-08T16:33:12Z

examples/with-msw/pages/index.js

+    return {
+      props: {
+        error: true,
+      },


Let's return something more friendly, like

props: { inProduction: true, },

We don't have an error here, it's expected to fail because there's no real endpoint

lfades · 2020-10-08T16:34:46Z

examples/with-msw/pages/index.js

+  if (error) {
+    return (
+      <div>
+        <p>Failed to fetch book</p>
+      </div>
+    )
+  }


Here don't handle it as an error, instead render a paragraph that explains why it will only work in localhost, you shouldn't be testing MSW in production.

lfades · 2020-10-08T16:36:14Z

examples/with-msw/pages/index.js

+    // This request will fail in production, as MSW is only run in development.
+    // In a real-world app this request would hit the actual backend.


These comments aren't needed because this request won't be executed in production due to the check below.

jensmeindertsma · 2020-10-08T17:34:30Z

@lfades I implemented the requested changes. Thanks for the review!

ijjk · 2020-10-08T17:44:24Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
buildDuration	13.9s	13.8s	-84ms
nodeModulesSize	63.4 MB	63.4 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.739	2.697	-0.04
/ avg req/sec	912.89	927.02	+14.13
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.609	1.538	-0.07
/error-in-render avg req/sec	1553.84	1626	+72.16

Client Bundles (main, webpack, commons)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..9b19.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-310f69a..b28a.js gzip	7.23 kB	7.23 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58 kB	58 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-fbbf49e..dule.js gzip	6.29 kB	6.29 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
buildDuration	15.6s	16s	⚠️ +400ms
nodeModulesSize	63.4 MB	63.4 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..9b19.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-310f69a..b28a.js gzip	7.23 kB	7.23 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58 kB	58 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-fbbf49e..dule.js gzip	6.29 kB	6.29 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	jensmeindertsma/next.js fix/with-msw-example	Change
_error.js	1.05 MB	1.05 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.05 MB	1.05 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.09 MB	1.09 MB	✓
withRouter.js	1.09 MB	1.09 MB	✓
Overall change	5.41 MB	5.41 MB	✓

Commit: 744cfc6

lfades

@jensmeindertsma Thank you!

williamyeny · 2020-12-11T19:20:20Z

Any thoughts on updating the README to reflect this PR?

jensmeindertsma · 2020-12-11T20:46:08Z

Hey @williamyeny this is actually not the approach would recommend anymore. I might open a PR to change the example when I have time. I don't think it makes sense updating the README until then.

lfades · 2020-12-12T16:35:07Z

@jensmeindertsma Thank you!

christemple · 2020-12-17T19:07:13Z

Hey @williamyeny this is actually not the approach would recommend anymore. I might open a PR to change the example when I have time. I don't think it makes sense updating the README until then.

@jensmeindertsma please do! I'm struggling to get MSW set up correctly with Next.js, the service worker doesn't finish activating before my Next.js app starts attempting data fetch requests, there seems to be a race condition and I'm not sure how to educate Next.js to wait until the worker is started

jensmeindertsma · 2020-12-17T19:12:32Z

@christemple give me 72 hours, I'll get back to you!

jensmeindertsma · 2020-12-19T15:43:34Z

@christemple as promised, I've set up a basic example with TypeScript here: https://github.com/jensmeindertsma/next-app-msw. I'll flesh it out a bit more and then I'll open a PR to reflect these changes in this repo. Basically, I switched back to using environment variables to control MSW. To disable MSW in production you need .env.production with it set to false, otherwise .env.development will be used.

jensmeindertsma · 2020-12-19T16:57:30Z

I just opened #20335 to implement the new example and update the README.

Jens Meindertsma added 3 commits October 7, 2020 18:14

Bump MSW version

de13081

Remove .env file

f37953d

Update conditional require statement

5192705

jensmeindertsma requested review from chibicode, ijjk, lfades, Timer and timneutkens as code owners October 7, 2020 17:10

ijjk added the examples Issue/PR related to examples label Oct 7, 2020

lfades reviewed Oct 7, 2020

View reviewed changes

examples/with-msw/pages/_app.js Outdated Show resolved Hide resolved

Jens Meindertsma added 3 commits October 7, 2020 19:54

Make real-world usage the default

dc49284

Add error handling

f024229

Merge branch 'canary' into fix/with-msw-example

f2f8e42

jensmeindertsma requested a review from lfades October 8, 2020 15:34

kettanaito reviewed Oct 8, 2020

View reviewed changes

lfades requested changes Oct 8, 2020

View reviewed changes

Make requested changes

744cfc6

jensmeindertsma requested a review from lfades October 8, 2020 17:34

lfades approved these changes Oct 8, 2020

View reviewed changes

kodiakhq bot merged commit c021662 into vercel:canary Oct 8, 2020

ijjk added the hacktoberfest-accepted label Oct 12, 2020

jensmeindertsma mentioned this pull request Dec 19, 2020

Update with-msw example #20335

Merged

vercel locked as resolved and limited conversation to collaborators Jan 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix with-msw example #17695

Fix with-msw example #17695

jensmeindertsma commented Oct 7, 2020

ijjk commented Oct 7, 2020

ijjk commented Oct 8, 2020

ijjk commented Oct 8, 2020

kettanaito Oct 8, 2020

lfades left a comment

lfades Oct 8, 2020

lfades Oct 8, 2020

lfades Oct 8, 2020

jensmeindertsma commented Oct 8, 2020

ijjk commented Oct 8, 2020

lfades left a comment

williamyeny commented Dec 11, 2020

jensmeindertsma commented Dec 11, 2020

lfades commented Dec 12, 2020

christemple commented Dec 17, 2020

jensmeindertsma commented Dec 17, 2020

jensmeindertsma commented Dec 19, 2020

jensmeindertsma commented Dec 19, 2020

		// This request will fail in production, as MSW is only run in development.
		// In a real-world app this request would hit the actual backend.

Fix with-msw example #17695

Fix with-msw example #17695

Conversation

jensmeindertsma commented Oct 7, 2020

ijjk commented Oct 7, 2020

Stats from current PR

ijjk commented Oct 8, 2020

Stats from current PR

ijjk commented Oct 8, 2020

Stats from current PR

kettanaito Oct 8, 2020

Choose a reason for hiding this comment

lfades left a comment

Choose a reason for hiding this comment

lfades Oct 8, 2020

Choose a reason for hiding this comment

lfades Oct 8, 2020

Choose a reason for hiding this comment

lfades Oct 8, 2020

Choose a reason for hiding this comment

jensmeindertsma commented Oct 8, 2020

ijjk commented Oct 8, 2020

Stats from current PR

lfades left a comment

Choose a reason for hiding this comment

williamyeny commented Dec 11, 2020

jensmeindertsma commented Dec 11, 2020

lfades commented Dec 12, 2020

christemple commented Dec 17, 2020

jensmeindertsma commented Dec 17, 2020

jensmeindertsma commented Dec 19, 2020

jensmeindertsma commented Dec 19, 2020