Hi, after several hours of debugging to find the root cause after getting a React 418 error on production (fly.io), I managed to deploy on fly the dev server so the error is not minified: I finally found that ClientHintsCheck nonce prop is causing it.
How can I solve it?
This is my client-hints.tsx:
/**
* This file contains utilities for using client hints for user preference which
* are needed by the server, but are only known by the browser.
*/
import { getHintUtils } from '@epic-web/client-hints';
import {
clientHint as colorSchemeHint,
subscribeToSchemeChange,
} from '@epic-web/client-hints/color-scheme';
import { clientHint as timeZoneHint } from '@epic-web/client-hints/time-zone';
import { useRevalidator } from '@remix-run/react';
import * as React from 'react';
import { useRequestInfo } from '@/utils/request-info';
const hintsUtils = getHintUtils({
theme: colorSchemeHint,
timeZone: timeZoneHint,
// add other hints here
});
export const { getHints } = hintsUtils;
/**
* @returns an object with the client hints and their values
*/
export function useHints() {
const requestInfo = useRequestInfo();
return requestInfo.hints;
}
/**
* @returns inline script element that checks for client hints and sets cookies
* if they are not set then reloads the page if any cookie was set to an
* inaccurate value.
*/
export function ClientHintCheck({ nonce }: { nonce: string }) {
const { revalidate } = useRevalidator();
React.useEffect(
() => subscribeToSchemeChange(() => revalidate()),
[revalidate]
);
return (
<script
nonce={nonce}
dangerouslySetInnerHTML={{
__html: hintsUtils.getClientHintCheckScript(),
}}
/>
);
}
If I comment out the nonce prop on the script, I get hydration error on the dangerouslySetInnerHTML prop....
I've been fighting with this sincetwo days now and can't get my head around it..
Hi, after several hours of debugging to find the root cause after getting a React 418 error on production (fly.io), I managed to deploy on fly the dev server so the error is not minified: I finally found that ClientHintsCheck nonce prop is causing it.
How can I solve it?
This is my client-hints.tsx:
nonce-provider.ts:
implemented in root.tsx:
If I comment out the nonce prop on the script, I get hydration error on the dangerouslySetInnerHTML prop.... I've been fighting with this sincetwo days now and can't get my head around it..