Unable to load next.config.mjs

[Complexlity]

I'm trying to use the package on a pages directory application and It shows the error in the image

error Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'webpack'....

Update: I solved this by installing webpack but I ran into another error about __dirname not in mjs scope. Eventually had to convert next.config.mjs to next.config.js

Nextjs: 13.4.2 Node: 18.17.1

[akashpandya18]

Well I had different error. I already have next.config.js & webpack installed. The Error I found was-

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/user/Desktop/Projects/proj_1/node_modules/@builder.io/react-hydration-overlay/dist/Overlay' imported from /Users/user/Desktop/Projects/proj_1/node_modules/@builder.io/react-hydration-overlay/dist/HydrationOverlay.mjs
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:327:11)
    at moduleResolve (node:internal/modules/esm/resolve:946:10)
    at defaultResolve (node:internal/modules/esm/resolve:1132:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  page: ‘/'

[Lim4Mik3]

hey guys, @akashpandya18 and @Complexlity

show me package.json and next.config files for a more detailed investigation.

Tks

[akashpandya18]

Hi @Lim4Mik3, quick update- Found this package on npm next-hydration-overlay registry, code hosted at next-hydration-overlay. Hung forked this repo and made some changes & somehow his package works well without any issues. The process of installation & setup is all same.

[Lim4Mik3]

Awesome, i ll check out this repo!

[samijaber]

published in https://github.com/BuilderIO/hydration-overlay/releases/tag/@builder.io/react-hydration-overlay@0.0.4

[mrkpatchaa]

@samijaber It seems like 0.0.5 breaks this again. The error is different

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/my-project/node_modules/@builder.io/react-hydration-overlay/dist/webpack' imported from /Users/my-project/node_modules/@builder.io/react-hydration-overlay/dist/next-plugin.mjs

We need to change import { withHydrationOverlayWebpack } from "./webpack"; to import { withHydrationOverlayWebpack } from "./webpack.mjs";

Thanks.