Hey team! 👋
I was looking into the codebase with Server-Side Rendering (SSR) compatibility in mind and noticed a potential crash issue in the dark-mode-listener.ts utility.
Currently, the DarkModeListener class calls window.matchMedia directly inside its constructor. Because an instance is created and exported immediately at the module level (export const darkModeListener = ...), this code will execute as soon as the file is imported.
If this package is imported in a Node.js SSR environment (like when integrating these web components into the Explorer frontend or any Nuxt/SvelteKit app), it will throw a ReferenceError: window is not defined and crash the server rendering process.
A quick fix would be to just wrap the window access in an environment guard (e.g., typeof window !== "undefined") or delay the media query initialization until it's actually running in the browser.
I'd love to help fix this! Would this be a good issue for me to pick up? Let me know what you think!
Hey team! 👋
I was looking into the codebase with Server-Side Rendering (SSR) compatibility in mind and noticed a potential crash issue in the
dark-mode-listener.tsutility.Currently, the
DarkModeListenerclass callswindow.matchMediadirectly inside its constructor. Because an instance is created and exported immediately at the module level (export const darkModeListener = ...), this code will execute as soon as the file is imported.If this package is imported in a Node.js SSR environment (like when integrating these web components into the Explorer frontend or any Nuxt/SvelteKit app), it will throw a
ReferenceError: window is not definedand crash the server rendering process.A quick fix would be to just wrap the
windowaccess in an environment guard (e.g.,typeof window !== "undefined") or delay the media query initialization until it's actually running in the browser.I'd love to help fix this! Would this be a good issue for me to pick up? Let me know what you think!