Next.js 10 + v5

[martpie]

• Fixes Next.js 10 #131 - Next.js 10
• Fixes v5 #115 - Improvements

If you want to try it, check #132, all feedback is very appreciated 🚀

[ScriptedAlchemy]

Yaaay! I'll try this out on my fork at work

[martpie]

Yes, this is indeed what should be done 👍 I will add an entry in the FAQ

[martpie]

Regarding the Webpack 5 HMR, I did not manage to make your PR work :( with the test I have for Webpack 5, modules are not hot-reloaded

[ScriptedAlchemy]

I've just got it working, and it's fast. Theres holes in it that ill need your help with - but it does hot reload reliably on my end now

[martpie]

What setup are you using? yarn workspaces or yarn add ?

[ScriptedAlchemy]

Yarn workspaces. So each repo has a package/site. That's next js server. Then all pages are other packages so I can move them around.

So the sub app next server has pages and each page imports a monorepo subapp. This lets me move pages to other apps next instances. The idea is one acts as a shell, with next. But all pages are independent. With module federation- this lets me import pages from other, independently deployed next apps. Since each pages wraps itself in a withApp hoc, the "site" package in the monorepo is just a base next app with _app integrating with the withApp hoc.

Anyways that's how the monorepo is.

[ScriptedAlchemy]

But I also yarn add some external packages on my registry, those are esm, so I have to transpile those too. Hence figuring out what's installed and what's symlinked as we determine what's cached.

It looks like we can simply resolve package.json packages, which works the best compared to others ways I tried before.

So it's a case of traversing more package.jsons in the symlinked apps so when we trigger a build on them, None of their node modules are recompiled.

That cache is something we have to say "cache all this" so there's no exclude option I know of.

Rebuilds are much faster now compared to cache false or anything else I tried. Including my previous forks stable release.

It's still building more then it needs to, seems like css but can't be sure. So my best bet is there's less, but some dependencies that we are still rebuilding. I'm wondering if traversing all the node modules package.jsons as well would improve the speed.

[paales]

I have been testing this branch with yarn workspaces and a few things seem to be working after adding the index.js to all the packages.

We had the issue before that fast refresh wasn't properly working and that seems to be working fine at the moment.

We do encounter issues with Webpack 5 at the moment, in development mode everything works as expected, but when building we get empty builds.. Not sure what I'm doing wrong:

$ next build
Loaded env from /Users/paulhachmang/Sites/reachdigital-next/examples/soxbase/.env
next-transpile-modules - WARNING experimental Webpack 5 support enabled
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

(node:59081) [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] DeprecationWarning: SingleEntryPlugin was renamed to EntryPlugin
info  - Creating an optimized production build ..<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (104kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (129kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (248kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (922/922)
info  - Finalizing page optimization  

Page                                       Size  First Load JS
┌ ● / (ISR: 1200 Seconds)                  0 B             0 B
├   /_app                                  0 B             0 B
├ ● /[...url]                              0 B             0 B
├   ├ /nl/what-is-new
├   ├ /nl/promotions/women-sale
├   ├ /nl/women/bottoms-women/pants-women
├   └ [+73 more paths]
├ ○ /404 (ISR: 1200 Seconds)               0 B             0 B
├ ● /account                               0 B             0 B
├ ● /account/change-password               0 B             0 B
├ ● /account/forgot-password               0 B             0 B
├ ● /account/signin                        0 B             0 B
├ ● /account/signup                        0 B             0 B
├ ● /cart                                  0 B             0 B
├ ● /checkout                              0 B             0 B
├ ● /page/[url]                            0 B             0 B
├   ├ /nl/page/home
├   ├ /nl/page/no-route
├   ├ /fr-be/page/home
├   └ [+5 more paths]
├ ● /product/[url]                         0 B             0 B
├   ├ /nl/product/erika-running-short
├   ├ /nl/product/ina-compression-short
├   ├ /nl/product/ana-running-short
├   └ [+745 more paths]
├ ● /switch-stores                         0 B             0 B
├ ● /test/[...url]                         0 B             0 B
├   ├ /nl/test/index
├   ├ /nl/test/other
├   ├ /fr-be/test/index
├   └ [+5 more paths]
└ ● /test/overlay/[...url]                 0 B             0 B
    ├ /nl/test/overlay/1
    ├ /nl/test/overlay/2
    ├ /nl/test/overlay/3
    └ [+37 more paths]
+ First Load JS shared by all              0 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)

Update: Saw this update vercel/next.js#19275, maybe it's related to that, had that functionality enabled.

Update 2: @martpie That was the issue, it's now building with webpack 5

[martpie]

Hello @paales, thank you very much for the feedback, it's very appreciated!

@ScriptedAlchemy and I have been working quite hard on Webpack 5 support and experimentation, right now, @module-federation/next-transpile-modules is more optimized for Wepback 5 + Yarn Workspaces, but less optimized for other setups (cf. #115).

Can you try his module and tell me if you still have this warning? It might be related to some cache optimization with Webpack 5 that I still did not backport to this branch.

[ScriptedAlchemy]

My latest work combined with yours makes projects like geodesy fail to resolve at all in next

Give that one a try - it just will not resolve for me - devs had to go back to 4.2.1 where regex was still used

[ScriptedAlchemy]

Looking good!

[martpie]

Yep, technically the only thing missing is the cache optimization for W5, I still haven't tried.

I'd like to see if I can solve it in a performant, and more importantly, isolated way (another module somewhere?) to avoid code noise.

Another option is to leave this part to the user (the dev), at least until we come up with a nice solution. Or hide it behind a flag.

I still have to think about it.

[noreiller]

Yep, technically the only thing missing is the cache optimization for W5, I still haven't tried.

I'd like to see if I can solve it in a performant, and more importantly, isolated way (another module somewhere?) to avoid code noise.

Another option is to leave this part to the user (the dev), at least until we come up with a nice solution. Or hide it behind a flag.

I still have to think about it.

Hello, I use next-transpile-modules with node_module packages so I would prefer an option to disable the cache (like the unstable_webpack5 one).

[martpie]

We disabled it by default. Now it's about adding the optimization by default or not

[martpie]

Ok let's go, we'll release the cache optimization in a minor release later