next.config.mjs issue

[Kevin R]

with using next config.mjs couldn't avoid getting this error around the build:

./next.config.mjs:5:38
Type error: Cannot find module '@builder.io/react-hydration-overlay/next' or its corresponding type declarations.

  3 | import "./src/env.mjs";
  4 | 
> 5 | import { withHydrationOverlay } from "@builder.io/react-hydration-overlay/next";
    |                                      ^
  6 | import path from "path";
  7 | const __dirname = path.dirname(fileURLToPath(import.meta.url));
  8 | 
error: script "build" exited with code 1 (SIGHUP)

next.config.mjs file:

// @ts-check
import { fileURLToPath } from "url";
import "./src/env.mjs";
import { withHydrationOverlay } from "@builder.io/react-hydration-overlay/next";
import path from "path";
const __dirname = path.dirname(fileURLToPath(import.meta.url));

/** @type {import('next').NextConfig} */
const nextConfig = {
....
};

export default withHydrationOverlay({
  appRootSelector: "app",
})(nextConfig);

[Sami Jaber]

I believe this is a types-only issue. Does the code work if you ignore the type error?

[Sami Jaber]

if you use // @ts-check, it has no notion of npm dependencies and will not find them. That's why.

You need to add next.config.mjs to your tsconfig.json files/include, and then types will flow correctly

[Kevin R]

No, the build fails and my next.config.mjs was already apart of my tsconfig.json

[Sami Jaber]

The build fails because of type issues, which you can ignore with // @ts-ignore.

Something must be wrong with your project's TS configuration. See https://github.com/BuilderIO/hydration-overlay/blob/main/tests/next-pages-esm/next.config.mjs#L1 for a working example