CF Workers: Hydration completed but contains mismatches. `entry.mjs`

[jjjrmy]

Environment

Cloudflare Workers / Miniflare

Local:

• Operating System: Darwin
• Node Version: v16.16.0
• Nuxt Version: 3.0.0-rc.3
• Package Manager: [email protected]
• Builder: vite
• User Config: nitro, vite
• Runtime Modules: -
• Build Modules: -

Reproduction

https://github.com/jjjrmy/nuxt3-worker-template

npm run build && npm run preview

Describe the bug

When you use the default app.vue that comes when installing Nuxt, the page does not return any errors. app.vue

<template>
  <NuxtWelcome />
</template>

When you use this app.vue and navigate to any route you get the hydration error. app.vue

<template>
  <NuxtLayout>
    <NuxtPage/>
  </NuxtLayout>
</template>

entry.mjs: Hydration completed but contains mismatches.

Additional context

This happens both locally when you preview and when you publish to CF workers.

When using the default app.vue file, the markup is returned in the initial request.

When using the update app.vue file, no markup is returned and is hydrated after.

I'm guessing this is why the error is happening?

[jjjrmy]

I can confirm that this workaround is a temporary fix: https://github.com/nuxt/framework/issues/6204#issuecomment-1201398080

[danielroe]

Would you try the latest edge version? https://github.com/nuxt/framework/pull/6468 may have resolved this.

[gezichenshan]

@danielroe tried rc.8 and the whole project cannot work properly 😢 Any solution for rc.6 of "Hydration completed but contains mismatches" issue?

Is there any method to disable the hydration?

[danielroe]

@gezichenshan Would you raise an issue for the problem you're experiencing with rc8? Did it resolve this issue but create a new one?

[gezichenshan]

@danielroe I create a new rc.8 project and copy&paste my code from my current rc.6 to rc.8.

It cannot work. Then I deleted code and left one index page in my /pages folder and now I got

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'extend')
         at $id_YrvcHuiS93 (./.nuxt/dist/server/server.mjs:39591:31)

the code in server.mjs:39591:31 is

__vite_ssr_import_0__.default.extend(__vite_ssr_import_6__.default);

and the __vite_ssr_import_0__ is from

const __vite_ssr_import_0__ = await __vite_ssr_import__("/node_modules/.pnpm/[email protected]/node_modules/dayjs/dayjs.min.js");

I think it is a common EMS issue so I added the "dayjs" in build.transpile but no magic.

I've encountered many same issues like what I said above.

[gezichenshan]

@danielroe I've created a new issue here and the minimal reproduction with my issue

[danielroe]

The original issue is no longer reproducible, so I'm closing this. If you experience any other issues, please feel free to open a new issue with reproduction and I'll look into it. 🙏