How to add external script?

[RidgewellServices]

I've been struggling to add an external script to my project. I've tried two different platforms--mailer-lite and substack. The scripts are meant to open a newsletter signup form. I can't get past the CSP nonce errors. Is it possible to do this?

[kentcdodds]

Unless you changed the CSP the nonce errors should just be warnings and things should work fine. But yeah you don't want to have those in there. You'll need to pass a nonce to any scripts you render similar to what we're doing here:

epic-stack/app/root.tsx

Lines 183 to 184 in bd837f4

	<ScrollRestoration nonce={nonce} />
	<Scripts nonce={nonce} />

(you can put it directly on a <script> though. You can access the nonce in any component using the useNonce hook: https://github.com/epicweb-dev/epic-stack/blob/main/app/utils/nonce-provider.ts#L5

[RidgewellServices]

It's already using the nonce-provider... completely beyond me how to make it work.

[kentcdodds]

That's odd because that's the opposite of what I would expect. The server should have a nonce and the client should not (and React is fine with this because it's how a nonce works).

https://www.epicstack.dev has a working nonce setup without warnings so there must be a difference between what you're doing and what's in the stack.

[RidgewellServices]

If I add the script to a virgin project, I get the errors. I don't have time to replicate it this afternoon, but will attack it again tomorrow. One more question - can I add:

<iframe src="https://ramonaridgewell.substack.com/embed" width="480" height="320" style="border:1px solid #EEE; background:white;" frameborder="0" scrolling="no"></iframe>

I had similar issues with this to the mailer-lite <script>.

[koikar]

I just went through the same problem for the past days.

My learnings:

• it's not a problem with nonce itself, but actually a hydration error
• certain scripts cause this error, others don't
• Google Analytics works fine but Google Tag Manager causes hydration error (same for Segment.io and different chat widgets)

Solution:

• upgrade to React v19 canary and all hydration errors are resolved automagically

Still now I am having problems with the client side ENV variables (used by the scripts), that suddenly become undefined in production at random moments (e.g. 5 hours after deploying).

Not sure if this is caused by React v19 or enabling single_fetch. Will need to investigate more. Hopefully you don't experience this problem.

[RidgewellServices]

Thanks. Yes, there were hydration issues. I'll try the upgrade and see if that makes a difference.