[Bug]: Prerender does not work with Mantine compound components and Router Set

[beardo01]

What's not working?

Hey,

I've come across an issue with Mantine where prerendering a page does not work when the Set that the page occurs in contains a compound component from Mantine. Specifically, this occurs when the Set warp layout contains the compound component and you are trying to prerender the page which is within the Set. The contents of the page does not seem to matter. To make this clear, I've observed the following:

Scenario	Outcome	Path in Example
Page is being prerendered. Page contains a compound component. Page is not apart of a set.	No error	/home-with-app-shell
Page is being prerendered. Page contains a compound component. Page is apart of a set. Set wrap layout does not contain a compound component.	No error	/home-with-app-shell-and-empty-layout
Page is being prerendered. Page does not contain a compound component. Page is apart of a set. Set wrap layout contains a compound component.	Error	/home

The resulting error is observed in the browser console as:

Uncaught Error: Minified React error #421; visit https://reactjs.org/docs/error-decoder.html?invariant=421 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Steps to reproduce and example repo are below.

According to Mantine documentation for Next.js and Mantine you cannot use compound components (e.g. AppShell and AppShell.Main) with server components. They suggest that you either include 'use client;' at the top of your file or the ComponentXXX (e.g. AppShell.Main becomes AppShellMain) syntax to work around this, however neither suggestion works for RedwoodJS (I tried both). I raised this issue in the Mantine Discord (here), however they believe that it is a RedwoodJS issue. This thread seems to suggest that Redwood needs to properly integrate with @mantine/ssr which might be relevant to this issue.

Let me know if you need any further information.

How do we reproduce the bug?

To make it easy to debug I've created a reproducer at https://github.com/beardo01/redwood-mantine-prerender-issue

You need to:

• yarn rw build (can use yarn rw build web to speed this up)
• yarn rw serve
• Open browser console
• Navigate to each route in Router.tsx and observe the console error
  • Specifically, the /home route should throw the error

What's your environment? (If it applies)

System:
    OS: macOS 13.5.1
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - /private/var/folders/54/6v5rm9s17zl60crs_fq2d7zh0000gn/T/xfs-d07f0faf/node
    Yarn: 4.0.2 - /private/var/folders/54/6v5rm9s17zl60crs_fq2d7zh0000gn/T/xfs-d07f0faf/yarn
  Databases:
    SQLite: 3.39.5 - /usr/bin/sqlite3
  Browsers:
    Chrome: 121.0.6167.160
    Edge: 121.0.2277.112
    Safari: 16.6
  npmPackages:
    @redwoodjs/core: 6.6.4 => 6.6.4

Are you interested in working on this?

• I'm interested in working on this