nonce empty on client

[curler7]

Getting following error on browser console

Warning: Prop nonce did not match. Server: "0d1781b142423cac737af4b3e38a32ea" Client: ""

Getting started with the following instructions

git clone https://github.com/epicweb-dev/epic-stack.git
cd epic-stack
npm install
cp .env.example .env
npm run setup

Tested with firefox and chromium. Both displayed same error.
Did i missed something? Thx for response.

[kentcdodds]

Hi @curler7,

I can't reproduce this on the deployed version of the stack: https://www.epicstack.dev

[kennethvdberghe]

I see that all nonce values are empty on de deployed version though

[huangc28]

I have the same problem. The client nonce is an empty value, but nonce generated on entry.server.tsx has value. This causes my web to have difference render result between the server and the client.

[kiliman]

Chrome DevTools doesn't display the nonce in the Elements tab. You can see that the nonce value is set if you View Source.

Also, you can see the nonce values by entering the following in the DevTools console:

$$('script').map(s => s.nonce)

If you're getting hydration warnings, it's probably due to a browser extension instead of the nonce values. You can verify by opening your web app in an Incognito window.

To prevent hydration warnings, I would recommend updating react and react-dom to latest RC versions. React 19 fixes the warnings caused by full-document hydration.

[reify-davidhale]

Adding my $0.02 to the discussion.

When I run Firefox Developer Edition and these initial commands:

npx create-epic-app@latest

# didn't setup deploy. picked random name. 
cd <randomly_picked_name> 
npm run dev

Upon opening the app I received the following screenshot: (validated while Private Browsing)

Checked in private browsing as recommended by @kiliman and still receiving this. To add further note, I am not seeing the same thing in Chrome DevTools locally. Surprisingly enough even though the nonce value is considered "" to begin with checking the Inspector yields nonce values which are not empty 🤔 Also once I deploy a production build for the react-router-dom entry the hydration issue seems to rectify as well.

To prevent hydration warnings, I would recommend updating react and react-dom to latest RC versions. React 19 fixes the warnings caused by full-document hydration.

I assume this is the proper solution is just await React 19? ☝️

Let me know and thanks for reading!

[kentcdodds]

I am able to reproduce this only when running the dev server and only with firefox (also tested chromium-based browsers and safari). If I run the production build locally (or deployed) I don't get an error in any browser.

This is odd, surprising, and annoying, but will not affect the production application. Considering it's only affecting Firefox, I'm going to have to assume this is a firefox bug. Sorry I can't be more helpful!

[reify-davidhale]

No this is great @kentcdodds! I really thought I was taking crazy pills so I now know I was only half-crazy :)

[lhapaipai]

Hi,
Thanks for this amazing repo, source of inspiration.
I want to reopen the discussion.
Indeed this issue is only highlighted in Firefox but I think it is present.

the NonceProvider is only defined server side

// entry.server.tsx

export default async function handleRequest(...args: DocRequestArgs) {
	//...

	const nonce = crypto.randomBytes(16).toString('hex')
	return new Promise(async (resolve, reject) => {
                //...
		const { pipe, abort } = renderToPipeableStream(
			<NonceProvider value={nonce}>
				<ServerRouter
					nonce={nonce}
					context={reactRouterContext}
					url={request.url}
				/>
			</NonceProvider>,
                        {
                          //...
                          nonce
                        }
		)

		setTimeout(abort, streamTimeout + 5000)
	})
}

but not client Side

// entry.client.tsx
startTransition(() => {
	hydrateRoot(document, <HydratedRouter />)
})

// root.tsx
export function Layout({ children }: { children: React.ReactNode }) {
	// if there was an error running the loader, data could be missing
	const data = useLoaderData<typeof loader | null>()
	
        const nonce = useNonce()
        // correct value server side
        // default value of NonceContext client side -> empty string
}

to highlight the issue.
define a default value of NonceContext.

// nonce-provider.ts
export const NonceContext = React.createContext<string>('hello');

we have a hydration error on all browsers

with Firefox

    <script
+              nonce="hello" // default value client side
-              nonce="edd3ae271e08d972ebd0d3440a1b1909" // server side
      dangerouslySetInnerHTML={{__html:"\n// This ..."}}
    >

with Chrome based

    <script
+              nonce="hello" // default value client side
-              nonce=""      // not accessible ?? but present in the source code
      dangerouslySetInnerHTML={{__html:"\n// This ..."}}
    >

What do you think?

[kentcdodds]

Chrome intentionally hides the nonce for security reasons.

[lhapaipai]

I'm stupid, the goal being precisely not to be able to access it on the client side...
So finally the entry point scripts have a nonce and the 'strict-dynamic' rule allows you not to worry about the scripts that will be loaded on the client side by the scripts defined on the server side. Is that right?
Sorry, I'm asking questions...

However, I have an answer about Firefox's behavior. If you set reportOnly to false, it behaves like Chrome.