Vue version

3.3.8

Link to minimal reproduction

https://github.com/anhthang/vue-vnode-null-reproduce

Steps to reproduce

Change your system preference to dark mode or set a local storage key nuxt-color-mode with value is dark

Run my repo yarn dev -o

What is expected?

Dark theme can be loaded like below

What is actually happening?

The layout is broken, styles cannot be loaded

This is error from console

node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js

Uncaught (in promise) TypeError: vnode is null
    NuxtJS 58
        getNextHostNode
        getNextHostNode
        componentUpdateFn
        run
        update
        updateComponent
        processComponent
        patch
        patchSuspense
        process
        patch
        componentUpdateFn

System Info

System:
    OS: macOS 14.2
    CPU: (8) arm64 Apple M1
    Memory: 112.53 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.1.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.0 - /opt/homebrew/bin/npm
  Browsers:
    Safari: 17.2
  npmPackages:
    vue: ^3.3.8 => 3.3.8

Any additional comments?

No response

Can't reproduce the error. (I mean, I saw the incorrect result, but no error messages)

On the other hand, this is not a minimal reproduction, as it contains too many other things, Nuxt, Ant Design Vue… To me, it is likely not a Vue bug. It looks more like an Ant Design Vue issue with Server Side Rendering.

Hi @sodatea

I have added some images to have better view. If you can see this from your end, it's the issue I'm facing.

I know this is not really minimal, but minimum that I can do to reproduce

I'm not pretty sure this is Vue bug also, but the console saying error coming from @vue/runtime-core, so I think this is first place I should create the ticket to address it

I can't see any error messages on my browser console.

You can try to set up a bare-bone server-side rendering vue app, rendering the ConfigProvider component from ant-design-vue, and making the colorMode variable be system during server-side rendering and dark on the client side. My guess is that the ConfigProvider component's style doesn't work as expected in this case and it's not Vue's fault.

Actually, I think there's a solution here, but it might require you to redesign how your app works:

• It's not possible to correctly pre-render a themed page without any storage on the server side, as is noted in the NuxtColorMode documentation: https://color-mode.nuxtjs.org/#caveats
• But wrapping the page inside a <ClientOnly> or <ColorScheme> component would make the whole page not pre-renderable.
• If that's acceptable, do it.
• If not, consider always requiring the user to choose a theme and store that value on the server; then, there won't be a mismatch between the server-rendered app and the client-rendered app, therefore working around the possible ant-design-vue bug. (this way, you might not need the @nuxtjs/color-mode module)

Thanks for your suggestion. I think I can do some workaround to make it works as my expected