`motion-v` Vite error

[ThatOneCalculator]

1. Describe the bug
Adding motion-v to my project (replacing motion) results in this error:

  VITE v6.2.3  ready in 1122 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help
✘ [ERROR] No matching export in "../../node_modules/motion-dom/dist/es/index.mjs" for import "GroupPlaybackControls"

    ../../node_modules/motion-v/dist/es/external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/interfaces/motion-value.mjs:1:36:
      1 │ import { getValueTransition, frame, GroupPlaybackControls } from "motion-dom";
        ╵                                     ~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "../../node_modules/motion-dom/dist/es/index.mjs" for import "GroupPlaybackControls"

    ../../node_modules/motion-v/dist/es/external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/animate/index.mjs:1:9:
      1 │ import { GroupPlaybackControls } from "motion-dom";
        ╵          ~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "../../node_modules/motion-dom/dist/es/index.mjs" for import "NativeAnimationControls"

    ../../node_modules/motion-v/dist/es/external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/animators/waapi/NativeAnimation.mjs:1:9:
      1 │ import { NativeAnimationControls, isGenerator, createGeneratorEasing, supportsLinearEasing } ...
        ╵          ~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "../../node_modules/motion-dom/dist/es/index.mjs" for import "GroupPlaybackControls"

    ../../node_modules/motion-v/dist/es/external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs:1:9:
      1 │ import { GroupPlaybackControls } from "motion-dom";
        ╵          ~~~~~~~~~~~~~~~~~~~~~

1472 |     let { file, line, column } = e.location;
1473 |     let pluginText = e.pluginName ? `[plugin: ${e.pluginName}] ` : "";
1474 |     return `
1475 | ${file}:${line}:${column}: ERROR: ${pluginText}${e.text}`;
1476 |   }).join("");
1477 |   let error = new Error(text);
                     ^
error: Build failed with 4 errors:
../../node_modules/motion-v/dist/es/external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/animate/index.mjs:1:9: ERROR: No matching export in "../../node_modules/motion-dom/dist/es/index.mjs" for import "GroupPlaybackControls"
../../node_modules/motion-v/dist/es/external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/animators/waapi/NativeAnimation.mjs:1:9: ERROR: No matching export in "../../node_modules/motion-dom/dist/es/index.mjs" for import "NativeAnimationControls"
../../node_modules/motion-v/dist/es/external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs:1:9: ERROR: No matching export in "../../node_modules/motion-dom/dist/es/index.mjs" for import "GroupPlaybackControls"
../../node_modules/motion-v/dist/es/external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/interfaces/motion-value.mjs:1:36: ERROR: No matching export in "../../node_modules/motion-dom/dist/es/index.mjs" for import "GroupPlaybackControls"
      at failureErrorWithLog (/home/kainoa/Git/redacted/node_modules/esbuild/lib/main.js:1477:15)
      at <anonymous> (/home/kainoa/Git/redacted/node_modules/esbuild/lib/main.js:946:25)
      at <anonymous> (/home/kainoa/Git/redacted/node_modules/esbuild/lib/main.js:1355:9)

Environment details

motion-v 1.0.0-alpha.4
vite 6.2.3
vue 3.5.13

[rytakei1]

seeing the same error when trying to run motion-v using nuxt

[pedromelo222]

I applied this temporary fix to allow the build to proceed.

Add the following to your package.json:

For pnpm:

"pnpm": { "overrides": { "motion-dom": "12.6.1" } }

npm:

"overrides": { "motion-dom": "12.6.1" }

[dgstewart]

Maybe I have something misconfigured, but the override block did not fix the bad GroupPlaybackControls import for me.
I believe a workaround might also be to hard set the motion-dom package to 12.6.1 in your package.json and for good measure motion-v to 0.13.1.

package.json

{
  "dependencies": {
     "motion-v": "0.13.1",
     "motion-dom": "12.6.1",
  }
}

I applied this temporary fix to allow the build to proceed.

Add the following to your package.json:

For pnpm:

"pnpm": { "overrides": { "motion-dom": "12.6.1" } }

npm:

"overrides": { "motion-dom": "12.6.1" }

[elrumo]

After spending the whole day trying to figure out why my nuxt project wasn't working adding "overrides": { "motion-dom": "12.6.1" } did the trick for me, and I'm using bun if it's of any use.

[StirStudios]

Same issue pinning to "pnpm": { "overrides": { "motion-dom": "12.6.1" } } resolves the issue.

[rick-hup]

Are you installing both 'motion' and 'motion-v'?

[StirStudios]

@rick-hup only 'motion-v'. We are also using this on Nuxt 3.

{  
 "dependencies": {
    "@nuxt/ui": "3.0.2",
    "motion-v": "1.0.0-alpha.4",
    "nuxt": "^3.16.2",
    "tailwindcss": "^4.1.0",
    "yup": "^1.6.1"
  },
 "pnpm": {
    "overrides": {
      "motion-dom": "12.6.1"
    }
  }
}

In the docs it references we only need to add to the modules:

modules: ['motion-v/nuxt']

However we still have to import when we use it in a component:

<script setup lang="ts">
import type { AosProps } from '~/types/UtilityTypes'
import { getMotionEffect } from '~/utils/animations'
import { motion } from 'motion-v'

const appConfig = useAppConfig()

const props = defineProps<AosProps>()

const motionEffects = getMotionEffect(props.effect)
</script>

<template>
  <motion.div
    v-if="effect"
    class="media"
    :in-view-options="{ once: appConfig.stirTheme.animations.once }"
    initial="hidden"
    :variants="motionEffects"
    while-in-view="show"
  >
    <slot />
  </motion.div>
  <slot v-else />
</template>

Just incase this helps for context.

[ThatOneCalculator]

@rick-hup only motion-v for me as well, but without Nuxt, just a Vue SPA

[StirStudios]

@rick-hup thanks for the speed resolve. Works like a charm!