Client build includes server-only libraries

[Pikachews]

I noticed that when I build a project including this library, the resulting client build includes a bunch of server libraries that bloat up the size.
For comparison, here's the output of a clean create-next-app output:

Page                                                           Size     First Load JS
┌ λ /                                                          7.08 kB        69.8 kB
├   /_app                                                      4.67 kB        62.7 kB
└ λ /404                                                       3.25 kB          66 kB
+ First Load JS shared by all                                  62.7 kB
  ├ static/pages/_app.js                                       4.67 kB
  ├ chunks/fa0d1538d4ec6ce8974fb6c1dd3701ae265e0f01.b01e96.js  10.5 kB
  ├ chunks/framework.c8d289.js                                 40.3 kB
  ├ runtime/main.71488f.js                                     6.54 kB
  └ runtime/webpack.c21266.js                                  746 B

After adding this library, here's the resulting output size:

Page                                                           Size     First Load JS
┌ λ /                                                          7.08 kB         211 kB
├   /_app                                                      145 kB          203 kB
└ λ /404                                                       3.25 kB         207 kB
+ First Load JS shared by all                                  203 kB
  ├ static/pages/_app.js                                       145 kB
  ├ chunks/e3159650bc6aa89eb4037de31e151c2fac446e71.c2e7b8.js  10.7 kB
  ├ chunks/framework.c8d289.js                                 40.3 kB
  ├ runtime/main.92af30.js                                     6.28 kB
  └ runtime/webpack.c21266.js                                  746 B

Here's an analysis of the client output with this library:

It seems all of the extraneous libraries stem from the importing of cookies.
If I dynamically import this library, the size goes back down to something reasonable (the analysis diagram still ends up including the extraneous libraries, although they're not loaded):

ServerCookies = (await import ('cookies')).default as any
cookies = new NodeCookiesWrapper(new ServerCookies(req, res));

Page                                                           Size     First Load JS
┌ λ /                                                          7.08 kB        72.2 kB
├   /_app                                                      6.63 kB        65.1 kB
└ λ /404                                                       3.25 kB        68.3 kB
+ First Load JS shared by all                                  65.1 kB
  ├ static/pages/_app.js                                       6.63 kB
  ├ chunks/971fcca33ddeb824ee6f37f20ba5b5cb1789aea2.c2e7b8.js  10.7 kB
  ├ chunks/framework.c8d289.js                                 40.3 kB
  ├ runtime/main.92af30.js                                     6.28 kB
  └ runtime/webpack.0b6f2e.js                                  1.18 kB

This is probably not the ideal solution, but just throwing that out there.

[Pikachews]

Looks like the proper solution is one of these methods: https://arunoda.me/blog/ssr-and-server-only-modules (though #2 wouldnt apply in this case).

[bjoluc]

Definitely, thanks for spotting this! I think the proper fix these days is using the

if (typeof window === "undefined") {
  ServerCookies = require('cookies')
}

trick. Next.js configures webpack to drop that code for client-side builds.

[bjoluc]

...thought I, not knowing that this does not apply to modules from node_modules. I'll use the evil eval hack then.

[bjoluc]

🎉 This issue has been resolved in version 1.1.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀