ReferenceError: Cannot access 'variant' before initialization

[CKGrafico]

I feel myself a little bit stupid because this should be simple, but I'm not fixing it...

If I try to access to variant in an Complete method, I've an error.

 const { variant } = useMotion(ref, {
    initial: {
      y: 0,
      scale: maxZoomTimes * 0.8,
      opacity: 0
    },
    enter: {
      y: 0,
      scale: maxZoomTimes,
      opacity: 1,
      transition: {
        delay: extraDelay,
        duration: 800,
        onComplete() {
          variant.value = 'idle';
        }
      }
    },
    idle: {
      y: 10,
      scale: maxZoomTimes,
      opacity: 1,
      transition: {
        duration: 2000,
        repeat: Infinity,
        ease: 'easeInOut',
        repeatType: 'mirror'
      }
    }
  });

Error: Uncaught (in promise) ReferenceError: Cannot access 'variant' before initialization at Object.onComplete

The code works pefect but I have the error on my console.

I think that this is happening because in the object I've external variables like maxZoomTimes and JavaScript evaluates the object before variant exist, if instead of using variables you have a raw object everything works fine.

[CKGrafico]

Meanwhile we wait for an official answer I have a kind of workaround... not my best code but I'll work.

First of all I've created some custom types:

import { MotionInstance, MotionProperties, MotionVariants, Transition } from '@vueuse/motion';

type Variant = {
  transition?: Transition;
} & MotionProperties;

export interface CustomMotionVariants extends MotionVariants {
  idle?: Variant;
}

and then...

 const instance = useMotion<CustomMotionVariants>(ref, {
    initial: {
      transform: 'translateY(0vh)',
      opacity: 0
    },
    enter: {
      transform: 'translateY(-25vh)',
      opacity: 1,
      transition: {
        duration: 800,
        onComplete() {
          instance.variant.value = 'idle';
        }
      }
    },
    idle: {
      transform: 'translateY(-24vh)',
      opacity: 1,
      transition: {
        duration: 2000,
        repeat: Infinity,
        ease: 'easeInOut',
        repeatType: 'mirror'
      }
    }
  });

[Leizhenpeng]

fuzzy me , delay will work....

const { variant } = useMotion(waitBorder, {
  initial: { x: -50, opacity: 0 },
  enter: {
    y: 0,
    x: 0,
    opacity: 0.8,
    transition: {
      type: 'keyframes',
      ease: 'easeInOut',
      duration: 2000,
      onComplete: () => {
        setTimeout(() => { variant.value = 'levitate' }, 20)
      },
    },
  },
  levitate: {
    opacity: 0.2,
    transition: {
      duration: 2000,
      repeat: Infinity,
      ease: 'easeInOut',
      repeatType: 'mirror',
    },
  },
})

[Tahul]

Hello,

Could you please provide a reproduction to the issue?

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

Sorry for the late answer, I will try to investigate myself as well soon!

[CKGrafico]

No problem for the late reply @Tahul we understand :) I'm also busy these days but if you provide a stackblitz sandbox with motion and typescript I can copy paste the same code

[Tahul]

The link is here: stackblitz.com/edit/vue-zj2zpq?file=src%2FApp.vue 😄

[CKGrafico]

Is not with typescript support, is it?

[github-actions[bot]]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

A link to a stackblitz project or public GitHub repository would be perfect. 👌

Please ensure that the reproduction is as minimal as possible.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[github-actions[bot]]

This issue was closed because it was open for 7 days without a reproduction.