Webpack hydration freeze and debug. #72243

ItzzLincler · 2024-11-03T19:07:14Z

Link to the code that reproduces this issue

To Reproduce

create a new next app 14@latest / 15.0.2
run 'full stack debug'
UPDATE: while I was creating a new project to upload for the reproduction of the bug. I managed to deduce that my hydration problem only occurres when there is a breakpoint on the client side (even though VS-code shows it isn't binding). maybe my vs-code is borked, I tried uninstalling a bunch of extensions but that didn't solve it either...

I don't know what else used to work fine in the past. I haven't touched next in a few months. v14 used to work fine on my PC.
I have no idea if you can reproduce it, but I don't know what to do at this point. I wasted so much time trying to play with the packge/launch.json to get it to work but to no avail....

Current vs. Expected behavior

When you run dev mode without turbo next is extremely slow at compiling a page and when you go to the page is stuck at hydration and is not responding to any input.
When you run it with turbo next works as expected but client-side debugging doesn't work from VS-Code, It only works when you place a breakpoint in the developers tab of the browser.

Provide environment information

OS:
Win10 - 19045
X64 AMD 5800x
32GB DDR4


packge.json: 
{
  "name": "my-next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-icons": "^1.3.1",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.1",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "dotenv": "^16.4.5",
    "drizzle-orm": "^0.36.0",
    "lucide-react": "^0.454.0",
    "next": "14.2.16",
    "pg": "^8.13.1",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.5.4",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/pg": "^8.11.10",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "drizzle-kit": "^0.27.1",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "tsx": "^4.19.2",
    "typescript": "^5"
  }
}


launch.json: 
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Next.js: debug server-side",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev"
        },
        {
            "name": "Next.js: debug client-side",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000"
        },
        {
            "name": "Next.js: debug full stack",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev",
            "serverReadyAction": {
                "pattern": "- Local:.+(https?://.+)",
                "uriFormat": "%s",
                "action": "debugWithChrome"
            }
        }
    ]
}

Which area(s) are affected? (Select all that apply)

Developer Experience, Turbopack, Webpack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

The text was updated successfully, but these errors were encountered:

ItzzLincler · 2024-11-04T10:56:42Z

So I continued to play with it and tried a bunch of different things, I decided to downgrade VS-Code to January 2024 build (1.86.2) because like I said before, I didn't have this problem in the past.
Lo and behold it seems to have done the trick!
*Not sure if Next.js or VS-Code is at fault here - but it seems that the latest version of vs code doesn't play well with Next.js..

justinbrick · 2024-11-07T21:14:02Z

I don't believe the hydration error is VSCode related, but likely some race condition in the webpack implementation, as I've also been having these issues, and the hydration error was broken before updating.
Downgrading my VSCode to 1.86.2 as you described, however, did fix debugging for me. Interesting enough, it fixed it on both Firefox & Chrome debugging, where the source maps being loaded were only as deep as the first directory, so I could only debug those files.
I think it might be safe to assume the Microsoft is the one at fault here. Could be wrong though, unless anyone has managed to narrow down the issue further?

ItzzLincler · 2024-11-08T07:56:13Z

I don't believe the hydration error is VSCode related, but likely some race condition in the webpack implementation, as I've also been having these issues, and the hydration error was broken before updating. Downgrading my VSCode to 1.86.2 as you described, however, did fix debugging for me. Interesting enough, it fixed it on both Firefox & Chrome debugging, where the source maps being loaded were only as deep as the first directory, so I could only debug those files. I think it might be safe to assume the Microsoft is the one at fault here. Could be wrong though, unless anyone has managed to narrow down the issue further?

From what I could tell, at least in my case the hydration error and the debug error were caused by the same thing.
On my machine, I noticed that as long as I disabled all breakpoints the hydration worked fine even on the latest build of VS-Code.
This leads me to believe that something between the versions of VS-Code and Next.js doesn't play well when trying to debug.
I can't say if it is Microsoft's fault or Vercel's this goes beyond my knowledge, but it would be great if someone from the Vercel team at least took a look so we can have a sense of direction.

onryldrm025 · 2024-11-12T15:10:29Z

Hello, I was having the same problem, I think the problem was I had to download the vscode version, it worked for me, you can try it too, good luck. Version: 1.84.2

heegu0311 · 2024-11-25T07:14:20Z

I was having the same problem.
Not sure what's the reason yet, but now I'm just able to debug full stack with launch.json like below.

Just by commenting serverReadyAction options, it started to work.
(No idea about the difference between use and no use of serverReadyAction. 😭)

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/next",
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"]
      // "serverReadyAction": {    
      //   "action": "debugWithEdge",
      //   "killOnServerStop": true,
      //   "pattern": "- Local:.+(https?://.+)",
      //   "uriFormat": "%s",
      //   "webRoot": "${workspaceFolder}"
      // }
    }
  ]
}

Just for sharing my thought, I'm assuming the issue might be caused by some library that has to be loaded in client components. For example, my project has RecoilRootProvider in layout.tsx.
So I tried getting rid of the RecoilRootProvider and recoil-related child components and then started the debugger with serverReadyAction options. That unlimited loading process disappears in my case.

// layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko">
      <body className={notoSansKr.className}>
        <MSWComponent />
        <ConfigProvider
          theme={{
            token: { colorLink: 'inherit' },
            components: {
              Table: {
                headerBg: '#F4F5F8',
                headerBorderRadius: 0,
                borderColor: '#CDD1D9',
              },
              Collapse: {
                contentBg: '#f5f5f5',
                contentPadding: 0,
                headerBg: '#ffffff',
                borderRadiusLG: 0,
              },
            },
          }}
        >
          <RecoilRootProvider>
            <ReactQueryProvider>
              {/* <CheckAuth /> */}
              <AntdRegistry>{children}</AntdRegistry>
            </ReactQueryProvider>
            <ModalProvider />
          </RecoilRootProvider>
        </ConfigProvider>
      </body>
    </html>
  );
}

timneutkens · 2025-04-30T14:07:39Z

Just double checked and vscode debugging for both Node.js and Browser works correctly with Turbopack now. Some changes were landed in 15.2/15.3. For Windows there's a fix on next@canary that will go out soon.

ItzzLincler added the bug Issue was opened via the bug report template. label Nov 3, 2024

github-actions bot added Developer Experience Turbopack Related to Turbopack with Next.js. Webpack Related to Webpack with Next.js. labels Nov 3, 2024

samcx removed the Developer Experience label Jan 22, 2025

timneutkens closed this as completed Apr 30, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack hydration freeze and debug. #72243

Webpack hydration freeze and debug. #72243

ItzzLincler commented Nov 3, 2024 •

edited

Loading

ItzzLincler commented Nov 4, 2024

justinbrick commented Nov 7, 2024

ItzzLincler commented Nov 8, 2024 •

edited

Loading

onryldrm025 commented Nov 12, 2024

heegu0311 commented Nov 25, 2024

timneutkens commented Apr 30, 2025

Webpack hydration freeze and debug. #72243

Webpack hydration freeze and debug. #72243

Comments

ItzzLincler commented Nov 3, 2024 • edited Loading

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

ItzzLincler commented Nov 4, 2024

justinbrick commented Nov 7, 2024

ItzzLincler commented Nov 8, 2024 • edited Loading

onryldrm025 commented Nov 12, 2024

heegu0311 commented Nov 25, 2024

timneutkens commented Apr 30, 2025

ItzzLincler commented Nov 3, 2024 •

edited

Loading

ItzzLincler commented Nov 8, 2024 •

edited

Loading