builderio / hydration-overlay Goto Github PK

View Code? Open in Web Editor NEW

444.0 444.0 10.0 6.59 MB

Overlay for hydration errors with explicit diff between renders.

Home Page: https://www.builder.io/blog/announcing-react-hydration-overlay

License: MIT License

TypeScript 43.51% JavaScript 5.16% CSS 51.33%

hydration react ssr

hydration-overlay's People

Contributors

Stargazers

Watchers

Forkers

hunghg255 yaman3bd cshawaus benjaminlesne luisabfs mathieuka marko154 mlmmn shubhdeep12 joshua-takyi

hydration-overlay's Issues

Unable to load next.config.mjs

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

Next 13 App router Issue

I'm using Next 13 App router and I've configured my next.config like in the demo

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

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

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);

And I went to my RootLayout and wrapped the whole app as recommanded like

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
       <HydrationOverlay>
          {children}
       </HydrationOverlay>
      </body>
    </html>
  )
}

But hydration errors still display the same

next.config.mjs issue

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);

Integration(Spotlight): Integration Request for Spotlight.

Hi,

I'd like to request the addition of integration support with Spotlightjs (https://spotlightjs.com/about/).

This enhancement would allow users to seamlessly view the Hydration error Overlay directly within the Spotlight overlay after integrating the hydration-overlay with the Spotlight.

Here is the associated GitHub issue for your reference: Link to GitHub Issue

We've also provided a proposed approach in the comments: Link to Comment

I would greatly appreciate your consideration and feedback on this feature request.

Thanks

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} />

Example on how to make it work in a NX nextjs project in monorepo?

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:

const {withNx} = require('@nx/next/plugins/with-nx')
const {withSentryConfig} = require('@sentry/nextjs')
const path = require('path')

const isAnalyzingBundle = process.env['ANALYZE'] === 'true'

const regexEqual = (x, y) => {
  return (
    x instanceof RegExp &&
    y instanceof RegExp &&
    x.source === y.source &&
    x.global === y.global &&
    x.ignoreCase === y.ignoreCase &&
    x.multiline === y.multiline
  )
}

/**
 * @type {import('next').NextConfig}
 */
let nextConfig = {
  // We should not increase it, otherwise we run out of Vercel's limits.
  staticPageGenerationTimeout: 60,
  swcMinify: true,
  reactStrictMode: true,
  distDir: 'dist',
  pageExtensions: ['page.tsx', 'page.ts', 'api.tsx', 'api.ts'],

  /*
   Optional build-time configuration options
   https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#extend-nextjs-configuration
  */
  sentry: {
    // This will be true by default on Sentry 8.0 so meanwhile we need to force its usage
    hideSourceMaps: true,
  },
  webpack: (config) => {
    // Adds rule in order to be able to use svgs using import, otherwise we get an error
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      resourceQuery: {not: [/url/]}, // exclude react component if *.svg?url
      use: ['@svgr/webpack'],
    })

    /*
     * Start of CSS modules classes output format configuration
     * This entire section is needed just to change CSS modules
     * classes output format as seen here:
     * https://stackoverflow.com/a/71450423/10504792
     */
    config.resolve.modules.push(path.resolve('./'))
    const oneOf = config.module.rules.find(
      (rule) => typeof rule.oneOf === 'object'
    )

    if (oneOf) {
      // Find the module which targets *.scss|*.sass files
      const moduleSassRule = oneOf.oneOf.find((rule) =>
        regexEqual(rule.test, /\.module\.(scss|sass)$/)
      )

      if (moduleSassRule) {
        // Get the config object for css-loader plugin
        const cssLoader = moduleSassRule.use.find(({loader}) =>
          loader.includes('css-loader')
        )

        if (cssLoader)
          cssLoader.options = {
            ...cssLoader.options,
            modules: {
              ...cssLoader.options.modules,
              localIdentName: '[local]--[hash:base64:5]',
              // You can also add other css-loader options here
            },
          }
      }
    }

    return config
  },
}

// Next js Bundle Analyzer https://www.npmjs.com/package/@next/bundle-analyzer
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: true,
})

const plugins = []

if (isAnalyzingBundle) {
  plugins.push(withBundleAnalyzer)
}

module.exports = async (phase, context) => {
  let updatedConfig = plugins.reduce((acc, fn) => fn(acc), nextConfig)

  updatedConfig = await withNx(updatedConfig)(phase, context)
  updatedConfig = withSentryConfig(updatedConfig)

  return updatedConfig
}

We've tried to add the withHydrationOverlay in different ways, and all of them causes errors:

If we add withplugins.push(withHydrationOverlay) we get 404 for all pages.

If we add with

module.exports = async (phase, context) => {
  let updatedConfig = plugins.reduce((acc, fn) => fn(acc), nextConfig)

  updatedConfig = await withNx(updatedConfig)(phase, context)
  updatedConfig = withSentryConfig(updatedConfig)
  updatedConfig = withHydrationOverlay({})(updatedConfig)

  return updatedConfig
}

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?

Cannot find module webpack from next-plugin.mjs

I installed the package:

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

I updated the root of my app like this:

click to expand

// file: _app.tsx
/*
...
imports
...
*/
import { HydrationOverlay } from "@builder.io/react-hydration-overlay";

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <HydrationOverlay>
      <Head>
        <title>{BRAND_NAME}</title>
      </Head>
      <Component {...pageProps} />
    </HydrationOverlay>
  );
};

export default api.withTRPC(MyApp);

I updated my next config like this:

click to expand

// file: next.config.mjs
import { withHydrationOverlay } from "@builder.io/react-hydration-overlay/next";
/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
await import("./src/env.mjs");

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,

  /**
   * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config
   * out.
   *
   * @see https://github.com/vercel/next.js/issues/41980
   */
  i18n: {
    locales: ["fr"],
    defaultLocale: "fr",
  },

  typescript: {
    ignoreBuildErrors: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  swcMinify: true,
};

export default withHydrationOverlay()(config);

I run

pnpm dev

Current behavior

My terminal throws this error:

> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- info Loaded env from /home/benjamin/code/jegwell-t3/.env
- 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 module '/home/benjamin/code/jegwell-t3/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@builder.io/react-hydration-overlay/dist/webpack' imported from /home/benjamin/code/jegwell-t3/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@builder.io/react-hydration-overlay/dist/next-plugin.mjs
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:224:11)
    at moduleResolve (node:internal/modules/esm/resolve:837:10)
    at defaultResolve (node:internal/modules/esm/resolve:1035:11)
    at DefaultModuleLoader.resolve (node:internal/modules/esm/loader:269:12)
    at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:153:32)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:33)
    at link (node:internal/modules/esm/module_job:75:36) {
  type: 'Error',
  code: 'ERR_MODULE_NOT_FOUND'
}
 ELIFECYCLE  Command failed with exit code 1.

Expected behavior

My app start without errors

Additionnal info

my package.json:

click to expand

{
  "name": "jegwell-t3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "postinstall": "prisma generate",
    "lint": "next lint",
    "typecheck": "tsc --noEmit",
    "start": "next start",
    "test:e2e": "playwright test",
    "test:e2e:local": "playwright test --headed --project='Mobile Chrome'",
    "test:e2e:local-ui": "playwright test --ui",
    "test:e2e:snapshots": "playwright test --update-snapshots",
    "stripe:listen": "stripe listen --forward-to localhost:3000/api/stripe",
    "stripe:trigger": "stripe trigger payment_intent.succeeded"
  },
  "dependencies": {
    "@builder.io/react-hydration-overlay": "^0.0.5",
    "@clerk/nextjs": "^4.17.1",
    "@fontsource/roboto": "^4.5.8",
    "@hookform/resolvers": "^3.1.1",
    "@prisma/client": "^4.11.0",
    "@radix-ui/react-alert-dialog": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-select": "^1.2.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@stripe/stripe-js": "^1.54.1",
    "@t3-oss/env-nextjs": "^0.2.1",
    "@tanstack/react-query": "^4.28.0",
    "@tanstack/react-table": "^8.9.3",
    "@trpc/client": "^10.18.0",
    "@trpc/next": "^10.18.0",
    "@trpc/react-query": "^10.18.0",
    "@trpc/server": "^10.18.0",
    "class-variance-authority": "^0.6.0",
    "clsx": "^1.2.1",
    "cmdk": "^0.2.0",
    "lucide-react": "^0.224.0",
    "micro": "^10.0.1",
    "next": "^13.4.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.45.2",
    "react-slick": "^0.29.0",
    "stripe": "^12.16.0",
    "superjson": "1.12.2",
    "tailwind-merge": "^1.12.0",
    "tailwindcss-animate": "^1.0.5",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@playwright/test": "^1.36.2",
    "@types/eslint": "^8.21.3",
    "@types/node": "^18.15.5",
    "@types/prettier": "^2.7.2",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/react-slick": "^0.23.10",
    "@typescript-eslint/eslint-plugin": "^5.56.0",
    "@typescript-eslint/parser": "^5.56.0",
    "@vitejs/plugin-react": "^4.0.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.36.0",
    "eslint-config-next": "^13.4.1",
    "jsdom": "^22.0.0",
    "postcss": "^8.4.21",
    "prettier": "^2.8.6",
    "prettier-plugin-tailwindcss": "^0.2.6",
    "prisma": "^5.1.1",
    "tailwindcss": "^3.3.0",
    "typescript": "^5.0.2",
    "vitest": "^0.31.1"
  },
  "ct3aMetadata": {
    "initVersion": "7.12.2"
  }
}

I tried using the Webpack helper, it gave me a similar error

click to expand

> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- info Loaded env from /home/benjamin/code/jegwell-t3/.env
- 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' imported from /home/benjamin/code/jegwell-t3/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@builder.io/react-hydration-overlay/dist/webpack.mjs
Did you mean to import webpack/webpack-lib.js?
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:781:9)
    at moduleResolve (node:internal/modules/esm/resolve:830:20)
    at defaultResolve (node:internal/modules/esm/resolve:1035:11)
    at DefaultModuleLoader.resolve (node:internal/modules/esm/loader:269:12)
    at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:153:32)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:33)
    at link (node:internal/modules/esm/module_job:75:36) {
  type: 'Error',
  code: 'ERR_MODULE_NOT_FOUND'
}
 ELIFECYCLE  Command failed with exit code 1.

My IDE could not auto import withHydrationOverlay somehow, ts complains that the module does not exist.

Did I miss something?

PS: As a maintainer, is it better to have those "click to expand" or should I remove them next time?

Video

2023-12-17.21-45-54.mp4

Module not found after implement the package

After implement the package, there are multiple issue appear like :

What i do to implement the package :
Next config :

_app.tsx file :

And still error appear
what is the solution for this issue ?

Requires explicit webpack dependency to run

I'm using the code as provided in the "webpack helper" example from your Github, but every time I run the project it complains that it cannot find the "webpack" package.

I've found that adding webpack as an explicit dependency gives hairy errors in Next 14, so I rely on Next's own internal webpack dependency. Since we have access to the "webpack" instance inside our nextjs config, if we are able to optionally provide it to the hydration-overlay wrapper function, it would avoid react-hyrdation-overlay having to import it separately, and thus fix the issue.

Suggestion: Use Prettier to format the HTML

At work, I've built a solution to display server-side errors on the client using the onRecoverableError callback from React 18.
I've extended that solution to display a diff on hydration errors based on this package, so thank you very much for sharing it.

A different approach I used was to format the HTML using prettier instead of beautify. I was getting a lot of false positives with beautify due to different things like HTML comments (), semicolons... So my diff was always huge. Using prettier, it's much smaller and there are only some false positives involving inline style attributes.

It might be good to explore this approach for the library itself. Here is a code snippet:

import prettier from 'prettier';
import parserHtml from 'prettier/parser-html';

const prettierHtmlOptions: prettier.Options = {
  parser: 'html',
  plugins: [parserHtml],
  tabWidth: 2,
};

prettier.format(value, prettierHtmlOptions);

Not compatible with Webpack's splitChunks.cacheGroups config

hydration-overlay-initializer.js relies on presence of react-dom string in event filename, namely const isReactDomError = event.filename.includes("react-dom");. This won't work when chunk that contains ReactDOM lib is renamed. Below is an extract from a real world Webpack config:

const vendorNames = [
    'react',
    'react-dom',
    'react-router-dom',
    'react-router',
    'react-helmet-async'
];

const webpackConfig = {
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendor: {
                    test: new RegExp(
                        `[\\/]node_modules[\\/](${vendorNames.join('|')})[\\/]`
                    ),
                    name: 'vendor',
                    chunks: 'all',
                    enforce: true
                }
            }
        }
    }
};

This config puts listed dependencies inside vendor.chunk.js module which obviously does not satisfy aforementioned condition. To mitigate this issue within workbase that I'm working on, I copied the contents of hydration-overlay-initializer.js script and modified it like so:

const HYDRATION_ERROR_REGEX_LIST = [
    /^Uncaught Error: Hydration failed/,
    /^Uncaught Error: There was an error while hydrating/
];

window.BUILDER_HYDRATION_OVERLAY = {};
window.addEventListener('error', event => {
    // Removed `react-dom` condition entirely
    const isHydrationMsg = HYDRATION_ERROR_REGEX_LIST.some(regexp => regexp.test(event.message));

    if (isHydrationMsg) {
        window.BUILDER_HYDRATION_OVERLAY.ERROR = true;
        const appRootEl = document.querySelector('#hydrate-root');
        if (appRootEl) {
            window.BUILDER_HYDRATION_OVERLAY.CSR_HTML = appRootEl.innerHTML;
        }
    }
});
const BUILDER_HYDRATION_OVERLAY_ELEMENT = document.querySelector('#hydrate-root');
if (BUILDER_HYDRATION_OVERLAY_ELEMENT) {
    window.BUILDER_HYDRATION_OVERLAY.SSR_HTML = BUILDER_HYDRATION_OVERLAY_ELEMENT.innerHTML;
}

Then this module is simply imported within bootstrap code. I believe this is not an ideal solution, but I hope it helps to shed some light on the issue as well as iterating to find a decent solution ✌️

No HTML diff showed on a fresh install nextjs app

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 (
    <HydrationOverlay>
      <Component {...pageProps} />
    </HydrationOverlay>
  );
}

next.config.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

2023-12-22.21-28-39.mp4

Doesn't work in next.js 14.1.0 application

I followed the guide step by step, but the overlay doesn't work.

Am i missing something?

setup

result

Not able to add webpack config in next.config.ts using hydrationoverlay wrapper

Here in this PR - #41

While adding a test case for next-app-dir-with-sentry-spotlight
I added a webpack plugin to run spotlight sidecar but it turns out it was not getting added as the next config was wrapped with

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

on removing the wrapper and just exporting the nextconfig the plugins was getting added and worked fine.

I tried with the withHydrationOverlay and withHydrationOverlayWebpack, both lead to the same error. (see below)

When I start the dev server and go to a page with an hydration error, I get this in my terminal :

[benjamin@archlinux jegwell-t3]$ pnpm dev

> [email protected] dev /home/benjamin/code/jegwell-t3
> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- info Loaded env from /home/benjamin/code/jegwell-t3/.env
- error ./node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@builder.io/react-hydration-overlay/dist/hydration-overlay-initializer.js
Module parse failed: parser.destructuringAssignmentPropertiesFor is not a function
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
TypeError: parser.destructuringAssignmentPropertiesFor is not a function
- wait compiling...
- wait compiling / (client and server)...
- error ./node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@builder.io/react-hydration-overlay/dist/hydration-overlay-initializer.js
Module parse failed: parser.destructuringAssignmentPropertiesFor is not a function
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
TypeError: parser.destructuringAssignmentPropertiesFor is not a function
- wait compiling /_error (client and server)...
- error ./node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@builder.io/react-hydration-overlay/dist/hydration-overlay-initializer.js
Module parse failed: parser.destructuringAssignmentPropertiesFor is not a function
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
TypeError: parser.destructuringAssignmentPropertiesFor is not a function
- error Error: Cannot find module '/home/benjamin/code/jegwell-t3/.next/fallback-build-manifest.json'
Require stack:
- /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/load-components.js
- /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js
- /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/dev/next-dev-server.js
- /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/next.js
- /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/lib/render-server.js
- /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/jest-worker/processChild.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1072:15)
    at /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/require-hook.js:180:36
    at Module._load (node:internal/modules/cjs/loader:925:27)
    at Module.require (node:internal/modules/cjs/loader:1139:19)
    at require (node:internal/modules/helpers:121:18)
    at loadDefaultErrorComponentsImpl (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/load-components.js:40:24)
    at DevServer.getFallbackErrorComponents (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/dev/next-dev-server.js:1314:73)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async DevServer.renderErrorToResponseImpl (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1565:40)
    at async DevServer.renderToResponseImpl (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1402:30)
    at async DevServer.pipeImpl (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:627:25)
    at async Object.fn (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js:1136:21)
    at async Router.execute (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/router.js:315:32)
    at async DevServer.runImpl (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:601:29)
    at async DevServer.run (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/dev/next-dev-server.js:922:20)
    at async DevServer.handleRequestImpl (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:533:20) {
  digest: undefined
}
Error: Cannot find module '/home/benjamin/code/jegwell-t3/.next/fallback-build-manifest.json'
Require stack:
- /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/load-components.js
- /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js
- /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/dev/next-dev-server.js
- /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/next.js
- /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/lib/render-server.js
- /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/jest-worker/processChild.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1072:15)
    at /home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/require-hook.js:180:36
    at Module._load (node:internal/modules/cjs/loader:925:27)
    at Module.require (node:internal/modules/cjs/loader:1139:19)
    at require (node:internal/modules/helpers:121:18)
    at loadDefaultErrorComponentsImpl (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/load-components.js:40:24)
    at DevServer.getFallbackErrorComponents (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/dev/next-dev-server.js:1314:73)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async DevServer.renderErrorToResponseImpl (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1565:40)
    at async pipe.req.req (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1439:30)
    at async DevServer.pipeImpl (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:627:25)
    at async DevServer.run (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/dev/next-dev-server.js:930:28)
    at async DevServer.handleRequestImpl (/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:533:20) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/load-components.js',
    '/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js',
    '/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/dev/next-dev-server.js',
    '/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/next.js',
    '/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/lib/render-server.js',
    '/home/benjamin/code/jegwell-t3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/jest-worker/processChild.js'
  ]
}

builderio / hydration-overlay Goto Github PK

hydration-overlay's People

Contributors

Stargazers

Watchers

Forkers

hydration-overlay's Issues

Current behavior

Expected behavior

Additionnal info

Video

Steps to reproduce

Current behavior

Expected behavior

Video

Recommend Projects

Recommend Topics

Recommend Org