[BUG] Out of the box, cannot access lexical declaration 'root' before initialization

[PauMAVA]

Hello!

I was trying to use this library in my SolidJS library project and I have found a problem. I tried to create a <Motion.div> element like this:

const appliedAnimation = {
    unmount: {
      opacity: 0,
    },
    mount: {
      opacity: 1,
    },
}
let [open, setOpen] = createSignal(true);
...
return (
    <>
      {open() && (
        <Motion.div
          {...rest}
          class={classes}
          initial={appliedAnimation.unmount}
          exit={appliedAnimation.unmount}
          animate={open() ? appliedAnimation.mount : appliedAnimation.unmount}
          transition={{ duration: 0.5 }}
        >
          {icon && iconTemplate}
          <span class={contentClasses}>{value}</span>
          {onClose && !action && <span>TODO</span>}
          {action || null}
        </Motion.div>
      )}
    </>
)

When I try to visualize the component I get the following error:

Uncaught ReferenceError: can't access lexical declaration 'root' before initialization
<anonymous> index.js:5450
createAndBindMotionState index.js:5434
runComputation index.js:184
updateComputation index.js:174
createEffect index.js:64
createAndBindMotionState index.js:5432
MotionComponent index.js:5450

Digging a little bit into solid-motionone I found that the conflicting line is inside the MotionComponent: https://github.com/solidjs-community/solid-motionone/blob/ba9005ffe20ae3b4327739c0e83ff0f1623cdb03/src/motion.tsx#L35-L45

As it can be seen the root variable is declared after it's reference into the arrow function? For me the transpiled code appears as:

var MotionComponent = (props) => {
  const [options, , attrs] = splitProps(props, OPTION_KEYS, ATTR_KEYS);
  const [state, style2] = createAndBindMotionState(() => root, () => ({
    ...options
  }), useContext(PresenceContext), useContext(ParentContext));
  let root;
  return createComponent(ParentContext.Provider, {
  ...

I'm quite new to solid-js, sorry if I'm missing something obvious here. I also tried to but the let root before the createAndBindMotionState call, and then the error is Animation state must be mounted with valid Element.

Finally here's a little bit of info about versions:

• solid-js: ^1.8
• solid-motionone: ^1.0.0

Thanks in advance! 😁