Cloudflare Developers•5w ago

Hydration errors with Nuxt3 and runtime compiler

I want to migrate Nuxt3 app to CF pages, however there seems to be a problem with dynamic component rendering at the runtime. This is an example of component that I use:

<script setup lang="ts">
import {compile} from "vue";

const x = compile(`
  <h1>
    Hello World !
  </h1>
`)
</script>

<template>
  <component :is="x" :="$attrs" />
</template>

<style scoped>

</style>

<script setup lang="ts">
import {compile} from "vue";

const x = compile(`
  <h1>
    Hello World !
  </h1>
`)
</script>

<template>
  <component :is="x" :="$attrs" />
</template>

<style scoped>

</style>

Here is the nuxt config:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },

  nitro: {
    preset: "cloudflare-pages"
  },

  routeRules: {
    '/test': {
      ssr: true
    }
  },

  modules: ["nitro-cloudflare-dev"],

  vue: {
    runtimeCompiler: true,
  },
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },

  nitro: {
    preset: "cloudflare-pages"
  },

  routeRules: {
    '/test': {
      ssr: true
    }
  },

  modules: ["nitro-cloudflare-dev"],

  vue: {
    runtimeCompiler: true,
  },
})

I get following error: 'Hydration completed but contains mismatches.' as shown on image, when running:

npx wrangler pages dev dist/

npx wrangler pages dev dist/

Due to this error app is not working ok when doing SSR in combination with runtime compilation.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Hydration errors with Nuxt3 and runtime compiler