-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Example on how to make it work in a NX nextjs project in monorepo? #9
Comments
I am completely unfamiliar with the Nx plugin and how it impacts adding other things, so I'm not sure what to suggest here. Since the only changes made by the plugin is altering the webpack config, we could potentially extract a |
In case having a webpack wrapper adds more flexibility: I released this https://github.com/BuilderIO/hydration-overlay/releases/tag/%40builder.io%2Freact-hydration-overlay%400.0.5 So you might be able to call that directly inside of your |
Hi @samijaber! First off, major kudos to you for working on this! 🎉 Hydration errors are so frustrating to debug and I'm excited to use this library. We also use an Nx monorepo with our Next.js app, and we ran into the same issue that Victor mentioned. We tried using the webpack wrapper, but it seems like the initial setup in hydration-overlay-initializer.js isn't happening soon enough, because we get this error: Overlay line 46 is trying to access window.BUILDER_HYDRATION_OVERLAY.SSR_HTML, but it's undefined, which is why I'm assuming that setup script isn't running soon enough (though I could definitely be wrong there): Our next config has the webpack plugin imported and it's being called in our webpack config section: Any thoughts on what might be missing? Thanks again for all your work! I'll keep poking at this but I'd appreciate any insight you might have! |
Unfortunately, hard to debug this since it seems to be specific to Nx. Can you provide a small repro? My instinct is that the initializer script is not running, or not running at the right time. You can confirm that by adding a console.log to this file: + console.log('initializer script ran');
window.BUILDER_HYDRATION_OVERLAY = {};
window.addEventListener("error", (event)=>{
const msg = event.message.toLowerCase();
const isReactDomError = event.filename.includes("react-dom");
const isHydrationMsg = msg.includes("hydration") || msg.includes("hydrating");
if (isReactDomError && isHydrationMsg) {
window.BUILDER_HYDRATION_OVERLAY.ERROR = true;
let appRootEl = document.querySelector(window.BUILDER_HYDRATION_OVERLAY.APP_ROOT_SELECTOR);
if (appRootEl) {
window.BUILDER_HYDRATION_OVERLAY.CSR_HTML = appRootEl.innerHTML;
}
}
});
let BUILDER_HYDRATION_OVERLAY_ELEMENT = document.querySelector(window.BUILDER_HYDRATION_OVERLAY.APP_ROOT_SELECTOR);
if (BUILDER_HYDRATION_OVERLAY_ELEMENT) {
window.BUILDER_HYDRATION_OVERLAY.SSR_HTML = BUILDER_HYDRATION_OVERLAY_ELEMENT.innerHTML;
} If this script doesn't run, then it means the webpack plugin is not adding the script correctly. |
I dug into this a bit more today, and I noticed this in my console:
It appears that the initializer script is indeed running, but on the server instead of the client. |
Huh. I am not familiar enough with Nextjs internals to know why this is happening (ONLY for Nx). We should add a check for Would you be able to create a minimum reproduction codebase using Nx + Next + react-hydration-overlay that showcases your issue? To make sure it isn't caused by some other dependency in your project and add it to this project to make sure there are no regressions. |
Could your issue be the same as #25 (comment) ? |
Hi! First of all, thanks for developing this cool library, we're facing some hydration errors that are being hard to debug, and hopefully this lib will help with that! We're facing an issue though, we use a NX monorepo, and we're not being able to setup this lib, as soon as we add withHydrationOverlay to the next.config.js file our application stops working.
This is how our next.config.js looks by default:
We've tried to add the withHydrationOverlay in different ways, and all of them causes errors:
If we add with
plugins.push(withHydrationOverlay)
we get 404 for all pages.If we add with
we receive this warning:
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
and nothing works with a 500 (Internal Server Error). Tried moving the withHydrationOverlay to different places without success as well.I know this is probably something related to NX, but maybe it's something you're interested to take a look and have some documentation around it?
The text was updated successfully, but these errors were encountered: