vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.69k stars 8.33k forks source link

Vue 3.5 $watch doesn't return a function during SSR #11924

Closed deleteme closed 2 months ago

deleteme commented 2 months ago

Vue version

3.5.5

Link to minimal reproduction

This uses the Nuxt reproduction starter to quickly setup SSR:

https://stackblitz.com/edit/github-ltvjgn?file=app.vue

Steps to reproduce

500
unwatch is not a function

at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js#cjs:200:33)
at callWithAsyncErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js#cjs:207:17)
at callHook (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js#cjs:3529:3)
at applyOptions (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js#cjs:3447:5)
at finishComponentSetup (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js#cjs:7867:7)
at handleSetupResult (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js#cjs:7818:3)
at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js#cjs:7787:7)
at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js#cjs:7718:36)
at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js#cjs:645:15)

What is expected?

A TypeError should not be thrown by calling unwatch. $watch is expected to return a function.

What is actually happening?

The return value is an object, not a function. This is happening because doWatch returns an object, not a function during some SSR scenarios here: https://github.com/vuejs/core/blame/d0b513eb463f580e29378e43d112ff6859aa366e/packages/runtime-core/src/apiWatch.ts#L182-L186.

System Info

npx envinfo --system --npmPackages vue --binaries --browsers

  System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 125.84 MB / 64.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.15.0 - ~/.local/share/nvm/v18.15.0/bin/node
    Yarn: 1.22.19 - ~/.local/share/nvm/v18.15.0/bin/yarn
    npm: 9.5.0 - ~/.local/share/nvm/v18.15.0/bin/npm
    pnpm: 9.0.6 - ~/.local/share/nvm/v18.15.0/bin/pnpm
    bun: 1.0.25 - ~/.bun/bin/bun
  Browsers:
    Chrome: 128.0.6613.138
    Safari: 17.6
    Safari Technology Preview: 18.0

Any additional comments?

This was detected in a Nuxt 3 app that uses @vue/apollo-option. That package calls unwatch during SSR. I filed a bug in that project to document the issue. https://github.com/vuejs/apollo/issues/1575

I have a fix with a unit test in progress, I'll open a PR soon (https://github.com/vuejs/core/pull/11925).

deleteme commented 2 months ago

PR to fix this error can be found here https://github.com/vuejs/core/pull/11925