Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
deleteme opened this issue Sep 13, 2024 · 1 comment · Fixed by #11925
Closed

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

deleteme opened this issue Sep 13, 2024 · 1 comment · Fixed by #11925
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. 🐞 bug Something isn't working regression

Comments

@deleteme
Copy link
Contributor

deleteme commented Sep 13, 2024

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

  • Load the stackblitz playground reproduction preview
  • You should see the 500 response from the server with the following call stack displayed:
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. vuejs/apollo#1575

I have a fix with a unit test in progress, I'll open a PR soon (#11925).

@deleteme
Copy link
Contributor Author

PR to fix this error can be found here #11925

@edison1105 edison1105 added 🐞 bug Something isn't working regression ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. labels Sep 14, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Oct 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. 🐞 bug Something isn't working regression
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants