oreid
February 13, 2024, 10:42am
1
Prerender does not work with Mantine compound components and Router Set when the compound component appears in the Set layout. I’ve raised a bug on Github but posting here for visibility in case others come across this in the future.
opened 10:39AM - 13 Feb 24 UTC
bug/needs-info
### What's not working?
Hey,
I've come across an issue with Mantine where pr… erendering 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` 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 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 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](https://discord.com/channels/854810300876062770/1206904801732984892)), however they believe that it is a RedwoodJS issue. [This](https://discord.com/channels/854810300876062770/1038128604929867806) 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)
```shell
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