[Bug] Cannot read properties of null (reading 'props') in SSR mode

[harrytran998]

Hi, thanks for the great libs. But when I use this with Vite SSG of antfu, I had the error like below. Can someone take a look?

[vite-ssg] Rendering Pages... (1)
[vite-ssg] Critical CSS generation enabled via `critters`
file:///Users/..../node_modules/vite-ssg/dist/chunks/build.mjs:218
        throw new Error(`${gray("[vite-ssg]")} ${red(`Error on page: ${cyan(route)}`)}
              ^

Error: [vite-ssg] Error on page: /
TypeError: Cannot read properties of null (reading 'props')
    at Object.getSSRProps (file:///Users/..../node_modules/@vueuse/motion/dist/index.mjs:1101:47)
    at ssrGetDirectiveProps (/Users/..../node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:707:21)
    at file:///Users/..../love/about-us/.vite-ssg-temp/main.mjs:1507:10
    at renderComponentSubTree (/Users/..../node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:250:13)
    at renderComponentVNode (/Users/..../node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:185:16)

And I open @vueuse/motion/dist/index.mjs:1101:47

return {
    created: register,
    unmounted: unregister,
    bind: register,
    unbind: unregister,
    getSSRProps(binding, el) {
    
      --> Bug here ===> const { initial } = binding.value || el.props || {};
    
    
      if (!initial || Object.keys(initial).length === 0)
        return;
      const { transform: _transform, style: _style } = splitValues(initial);
      const { transform } = reactiveTransform(_transform);
      const { style } = reactiveStyle(_style);
      if (transform.value)
        style.value.transform = transform.value;
      return {
        style: style.value
      };
    }
  };

[Tahul]

Hey @harrytran998, I gave a potential answer to this issue there.

I've closed this issue, so we can track it here.

Could you try ^2.0.0-beta.22 please?

Also, a reproduction would be amazing 🙏

As a way to prevent future breakings, I added a playground using vite-ssg in the repository.

Will be running a build with it on each commit CI now. 🙂

[Tahul]

Here is a link to a sandbox to help for the reproduction: https://stackblitz.com/edit/vue-zj2zpq?file=src%2FApp.vue

[allowedcloud]

^2.0.0-beta.22 appears to fix it.

[leomp12]

Any reason to keep version 2.0.0-beta.12 as latest @Tahul ? https://www.npmjs.com/package/@vueuse/motion?activeTab=versions 2.0.0-beta.22 fixes SSR, 2.0.0-beta.27 gives other error (defu undefined) thus tagged beta, shouldn't 2.0.0-beta.22 be tagged latest?