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 :)