No HTML diff showed on a fresh install nextjs app

[BenjaminLesne]

Here is the repo with the behavior

Steps to reproduce

npx create-next-app@latest

• choose the pages directory

pnpm install @builder.io/react-hydration-overlay

• In pages/index.tsx, add anywhere in the jsx :

  {Math.random()}

• _app.tsx :

  
  import '@/styles/globals.css'
  import { HydrationOverlay } from "@builder.io/react-hydration-overlay";
  import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) { return (

); }

- next.config.js :
```js
const {
  withHydrationOverlay,
} = require("@builder.io/react-hydration-overlay/next");

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@builder.io/react-hydration-overlay'],
};

module.exports = withHydrationOverlay({
  /**
   * Optional: `appRootSelector` is the selector for the root element of your app. By default, it is `#__next` which works
   * for Next.js apps with pages directory. If you are using the app directory, you should change this to `main`.
   */
  // appRootSelector: "main",
})(nextConfig);

• start the dev server

  pnpm dev

  Current behavior

  The nextjs hydration error dialog shows up on the homepage.

Expected behavior

The hydration-overlay error dialog shows up on the homepage with the HTML diff

Video

https://github.com/BuilderIO/hydration-overlay/assets/73464907/f0a30a02-d782-4bf8-a5c4-901ae33b2daf

[BenjaminLesne]

I figured this out.

It does work in Google Chrome but not in Firefox.