fix(ssr): watchEffect onInvalidate runner initialization

Author: tjk

packages/runtime-core/__tests__/apiWatch.spec.ts

@@ -10,6 +10,7 @@ import {
   ComponentInternalInstance,
   ComponentPublicInstance
 } from '../src/index'
+import { setupComponent } from '../src/component'
 import {
   render,
   nodeOps,
@@ -44,6 +45,28 @@ describe('api: watch', () => {
     expect(dummy).toBe(1)
   })
 
+  // https://github.com/vuejs/vue-next/issues/3322
+  it('effect onInvalidate succeeds in ssr context', done => {
+    // XXX do this without double setup and generally less hackily!
+    let instance: ComponentInternalInstance | null
+    const noop = () => {}
+    const Comp = defineComponent({
+      setup() {
+        if (!instance) {
+          instance = getCurrentInstance()
+        } else {
+          watchEffect(onInvalidate => {
+            expect(() => onInvalidate(noop)).not.toThrow(ReferenceError)
+            done()
+          })
+        }
+      },
+      render: noop
+    })
+    createApp(Comp).mount(nodeOps.createElement('div'))
+    setupComponent(instance!, true)
+  })
+
   it('watching single source: getter', async () => {
     const state = reactive({ count: 0 })
     let dummy

packages/runtime-core/src/apiWatch.ts

@@ -5,7 +5,8 @@ import {
   Ref,
   ComputedRef,
   ReactiveEffectOptions,
-  isReactive
+  isReactive,
+  ReactiveEffect
 } from '@vue/reactivity'
 import { SchedulerJob, queuePreFlushCb } from './scheduler'
 import {
@@ -167,6 +168,7 @@ function doWatch(
 
   let getter: () => any
   let forceTrigger = false
+  let runner: ReactiveEffect<any> | undefined
   if (isRef(source)) {
     getter = () => (source as Ref).value
     forceTrigger = !!(source as Ref)._shallow
@@ -224,6 +226,9 @@ function doWatch(
 
   let cleanup: () => void
   const onInvalidate: InvalidateCbRegistrator = (fn: () => void) => {
+    if (!runner) {
+      return
+    }
     cleanup = runner.options.onStop = () => {
       callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)
     }
@@ -246,7 +251,7 @@ function doWatch(
 
   let oldValue = isArray(source) ? [] : INITIAL_WATCHER_VALUE
   const job: SchedulerJob = () => {
-    if (!runner.active) {
+    if (!runner || !runner.active) {
       return
     }
     if (cb) {
@@ -293,7 +298,7 @@ function doWatch(
     }
   }
 
-  const runner = effect(getter, {
+  runner = effect(getter, {
     lazy: true,
     onTrack,
     onTrigger,
@@ -316,9 +321,11 @@ function doWatch(
   }
 
   return () => {
-    stop(runner)
-    if (instance) {
-      remove(instance.effects!, runner)
+    if (runner) {
+      stop(runner)
+      if (instance) {
+        remove(instance.effects!, runner)
+      }
     }
   }
 }