ERROR: Cannot read properties of undefined (reading 'update')

[micha-lmxt]

ERROR: Cannot read properties of undefined (reading 'update')

[micha-lmxt]

I started a new sveltekit app from the template today. I tried basic motion and some layout effects and both worked. Sveltekit version is "1.0.0-next.483", but I also downgraded to "1.0.0-next.480" without problems. Do you have a little more information, since there seems to be no general problem with sveltekit?

[rchrdnsh]

ok, so i did the same thing...

1. made a new svelte todo app using npm create svelte@latest
2. installed svelte-motion using npm install --save-dev svelte-motion
3. copied and pasted this example into a new svelte page:

https://svelte.dev/repl/4cbff886878c4b59beda7a1e0108c233?version=3.38.2

...and it worked just fine.

I then copied this REPL into the same page, completely replacing the other example:

https://svelte.dev/repl/0f586143c38f4a2599e5f3fbf9789ec3?version=3.38.2

...and immediately got the following error:

...in text form:

[HMR][Svelte] Unrecoverable HMR error in <Measure>: next update will trigger a full reload
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'update')
    at instance (Measure.svelte:102:34)
    at init (index.mjs:1892:11)
    at new Measure (Measure.svelte:75:46)
    at createProxiedComponent (svelte-hooks.js?v=42b7b71c:341:9)
    at new ProxyComponent (proxy.js?v=42b7b71c:242:7)
    at new Proxy<Measure> (proxy.js?v=42b7b71c:349:11)
    at create_fragment (MeasureContextProvider.svelte:12:43)
    at init (index.mjs:1907:37)
    at new MeasureContextProvider (MeasureContextProvider.svelte:16:27)
    at createProxiedComponent (svelte-hooks.js?v=42b7b71c:341:9)

...which I think is the same or similar error I was running into with the OP...I also found out that svelte-motion DOES INDEED work in production, so I'm running into the error in development mode...

...in the case of the project I am using svelte-motion in I am able to get around this error by not using the <MotionConfig> component, but no animations are occurring for me either...no errors as well...just no animations actually running in dev mode...the animations DO work in production...dunno what that means yet, however...

[rchrdnsh]

hmmmm...I fully deleted svelte-motion and reinstalled it from the command line and it finally installed 0.11.3 and now I'm getting these errors everywhere on every page and nothing using svelte-motion seems to work...

[micha-lmxt]

Sounds like a HMR issue, does a full page reload (F5) help?

[rchrdnsh]

every full page reload produces the same error for me. This is essentially making the entire app unusable at this point...

This is the code at line 102 in the Motion.svelte file, if this helps at all:

    scaleCorrectionParentContext.update((v) =>
        v.concat([{
            updater,
            afterU
        } ])
    );
    afterUpdate(afterU);

...been trying to figure things out, but I admittedly don't know the codebase for either svelte/kit or svelte-motion, so I'm kind of fumbling in the dark...

[rchrdnsh]

looking to see if i can disable HMR in vite or kit ATM...

[rchrdnsh]

Tried doing this in the vite.config.js file, but still getting the same errors:

const config = {
  server: {
    hmr: false
  },

[micha-lmxt]

Thank you, I was able to replicate the error. Quick fix is to change the import from
import Motion from 'svelte-motion/src/motion/MotionSSR.svelte';
to
import {Motion} from 'svelte-motion';

I try to fix the SSR component in the meantime. Sveltekit has become quite robust, there seems to be no need for special Server-/Clientside-handling anymore. It is still needed for REPL at this point.

[rchrdnsh]

yay, that is indeed working for me now, thank you!

This also seems like a good thing now, yes? The ideal situation would be to not have to import an maintain a separate SSR component, correct?

Anyway, it is indeed working for me now, so thank you very much :-)