remix-island

🚨 this package is a workaround to allow usage of remix with react@(18.0 - 18.2) which comes with a lot of hydration problems. I'll probably not maintain this for long after react@18.3 hopefully fixes this.

ref https://github.com/remix-run/remix/issues/5463, https://github.com/remix-run/remix/issues/5144, https://github.com/remix-run/remix/issues/4822, https://github.com/remix-run/remix/discussions/5244, https://github.com/facebook/react/issues/24430

---

utils to render remix into a dom-node (like

) instead of the whole document

This approach was pioneered by @kiliman in kiliman/remix-hydration-fix 🙏👍🎉

install

``bash
npm i remix-island
`

configure

#### 1. Stop rendering the whole html document from within remix

`diff
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -7,6 +7,7 @@ import {
Scripts,
ScrollRestoration,
} from '@remix-run/react';
+import { createHead } from 'remix-island';

export const meta: MetaFunction = () => ({
charset: 'utf-8',
@@ -14,19 +15,21 @@ export const meta: MetaFunction = () => ({
viewport: 'width=device-width,initial-scale=1',
});

+export const Head = createHead(() => (
+ <>
+
+
+
+));
+
export default function App() {
return (
-
-
-
-
-
-
-
-
-
-
-
-
+ <>
+
+
+
+
+
+
);
}
`

#### 2. Manually render the and create the document

`diff
--- a/app/entry.server.tsx
+++ b/app/entry.server.tsx
@@ -4,6 +4,8 @@ import { Response } from '@remix-run/node';
import { RemixServer } from '@remix-run/react';
import isbot from 'isbot';
import { renderToPipeableStream } from 'react-dom/server';
+import { renderHeadToString } from 'remix-island';
+import { Head } from './root';

const ABORT_DELAY = 5000;

@@ -41,6 +43,7 @@ function handleBotRequest(
,
{
onAllReady() {
+ const head = renderHeadToString({ request, remixContext, Head });
const body = new PassThrough();

responseHeaders.set('Content-Type', 'text/html');
@@ -51,8 +54,11 @@ function handleBotRequest(
status: didError ? 500 : responseStatusCode,
}),
);

+ body.write(
+ ${head}

);
},
onShellError(error: unknown) {
reject(error);
@@ -82,6 +88,7 @@ function handleBrowserRequest(
,
{
onShellReady() {
+ const head = renderHeadToString({ request, remixContext, Head });
const body = new PassThrough();

responseHeaders.set('Content-Type', 'text/html');
@@ -93,7 +100,11 @@ function handleBrowserRequest(
}),
);

+ body.write(
+ ${head}

);
},
onShellError(err: unknown) {
reject(err);
`

#### 3. hydrate