Hydration mismatch error

Environment

• Operating System: Linux
• Node Version: v16.9.0
• Nuxt Version: 3-3.0.0-27235989.d52b1e8
• Package Manager: Yarn
• Bundler: Webpack
• User Config: -
• Runtime Modules: -
• Build Modules: -

Describe the bug

I was eager to try out the nuxt 3 beta. And simply followed the installation instructions from https://v3.nuxtjs.org/getting-started/installation . But on running yarn dev -o or yarn dev I get a console error saying ‘Hydration completed but contains mismatches.’ Not sure if I’m missing something. I’ve just started with nuxt

Reproduction

Just following the installation steps should reproduce it:

npx nuxi init nuxt3-app

code -r nuxt3-app

yarn install

yarn dev -o

Additional context

The error was generated via @vue/runtime-core:

function createHydrationFunctions(rendererInternals) {
    ....
    if (hasMismatch && !false) {
                // this error should show up in production
                console.error(`Hydration completed but contains mismatches.`);
    }
}

Logs

No response

[danielroe]

From a cursory glance at the error in your devtools, tt looks to me like you might have a service worker running that’s serving up cached responses. (Or possibly one of your browser extensions could be blocking your network requests.)

Would you try in an incognito tab and see if this issue is reproduced?

[thekhairul]

Yes, you’re right. It’s working in incognito. My apologies. I should’ve tried that already