Gives a module error

[Malik Öztürk]

It didn't work with both Webpack and plain config.
next.config.js
webpack: (config, options) => {
config = withHydrationOverlayWebpack({
appRootSelector: "#__next",
isMainAppEntryPoint: (entryPointName) =>
!options.isServer &&
(entryPointName === "pages/_app" || entryPointName === "main-app"),
})(config);
return config;
},

_app.tsx


<Page {...pageProps} />

[Saad Shahd]

Fixed by adding @builder.io/react-hydration-overlay to next.config transpilePackages

transpilePackages: ['@builder.io/react-hydration-overlay'],

[BenjaminLesne]

@saadshahd nice! it got rid of the server error.

But I don't have the HTML diff showing up still.
Am I the only one?

[Malik Öztürk]

Fixed by adding @builder.io/react-hydration-overlay to next.config transpilePackages

transpilePackages: ['@builder.io/react-hydration-overlay'],

Thanks, I'm trying

[Malik Öztürk]

Fixed by adding @builder.io/react-hydration-overlay to next.config transpilePackages

transpilePackages: ['@builder.io/react-hydration-overlay'],

Thanks!!

it worked