React hydration errors

[uday-rana]

Ran into these errors while using the website. They persisted as I navigated between pages. A hard reload (Ctrl + R) made them go away.

https://react.dev/errors/418?invariant=418
https://react.dev/errors/423?invariant=423
https://react.dev/errors/425?invariant=425

[theoforger]

@uday-rana Hello! I'm trying to reproduce this. Did you encounter this on a dev build or a production build? What browser were you using?

[uday-rana]

@theoforger In production (https://mycustomdomain.senecapolytechnic.ca/) on Firefox on Windows 10 22H2

[theoforger]

Although I'm not able to reproduce this issue, I suspect it might have to do with CSP (Content Security Policy). According to the screenshots the policy for script is set up as script-src 'self' 'nonce-<value>', reflected in the source code here:

starchart/server.ts

Line 29 in 82608ec

scriptSrc: ["'self'", (_req, res) => `'nonce-${(res as Response).locals.nonce}'`],

Perhaps somewhere the code to utilize nonce is buggy, causing some UI-related scripts to be rejected.

I'll keep looking into it. Others feel free to investigate as well! 😆

[theoforger]

I finally ran into this issue after leaving the "DNS records" page open and idle overnight. And other pages seemed to load just fine. It might not be related to CSP after all, since I didn't see the error message here.

Strangely, every time I refresh, the style sheet seems to load for a split second and then unloads itself:

Screencast.From.2025-03-21.09-56-39.mp4

[theoforger]

@humphd I might have found the cause of this bug:

The dates displayed on the Certificate page are rendered on the server side, which can cause a disagreement with the client if the browser is in a different time zone, therefore the hydration issue.

I encountered this during my tests for #1009 - On the failed playwright runs, I'm getting this in the console:

Warning: Text content did not match. Server: "Nov 27, 2025" Client: "Nov 28, 2025"
    at dd
    at http://localhost:8080/build/_shared/chunk-WYEVIKHP.js:34609:45
    at ChakraComponent2 (http://localhost:8080/build/_shared/chunk-WGRDFYGG.js:5183:15)
    at StatNumber2 (http://localhost:8080/build/_shared/chunk-WGRDFYGG.js:20914:21)
...

I'll make a pull request with my fix and see if it works.