[Bug] Can't Build With Nuxt 3

[Kunoacc]

1. Describe the bug

Give a clear and concise description of what the bug is.

Worked with Nuxt 3 in development, build when you build for production and try to run with yarn start on on verbal/netlify, it fails with this error:

[nuxt] [request error] Cannot find module '/Users/nelsonnelson-atuonwu/Sources/GRIP/grip-nuxt-website/.output/server/node_modules/motion/vue' imported from /Users/nelsonnelson-atuonwu/Sources/GRIP/grip-nuxt-website/.output/server/chunks/app/server.mjs
Did you mean to import motion/dist/vue.cjs.js?
  at new NodeError (node:internal/errors:371:5)  
  at finalizeResolution (node:internal/modules/esm/resolve:416:11)  
  at moduleResolve (node:internal/modules/esm/resolve:932:10)  
  at defaultResolve (node:internal/modules/esm/resolve:1044:11)  
  at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)  
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)  
  at link (node:internal/modules/esm/module_job:75:36)

2. IMPORTANT: Provide a CodeSandbox reproduction of the bug

A CodeSandbox minimal reproduction will allow us to quickly follow the reproduction steps. Without one, this bug report won't be accepted.

3. Steps to reproduce

Steps to reproduce the behavior:

1. Create a new Nuxt 3 project
2. Use the Motion/vue component
3. Build for production with yarn build
4. Try to run production build with yarn start
5. See error in console

4. Expected behavior

Production build should load correctly and no error should show up in the console

5. Video or screenshots

If applicable, add a video or screenshots to help explain the bug.

6. Browser details

Firefox Developer Edition - MacOS version 12.13.1

[mattgperry]

Does it work if you import from @motionone/vue instead?

[Kunoacc]

Also doesn't work

 [nuxt] [request error] Cannot find package '/Users/nelsonnelson-atuonwu/Sources/GRIP/grip-nuxt-website/node_modules/@motionone/vue/' imported from /Users/nelsonnelson-atuonwu/Sources/GRIP/grip-nuxt-website/.output/server/chunks/app/server.mjs
  at new NodeError (internal/errors.js:322:7)  
  at legacyMainResolve (internal/modules/esm/resolve.js:255:9)  
  at packageResolve (internal/modules/esm/resolve.js:725:14)  
  at moduleResolve (internal/modules/esm/resolve.js:773:18)  
  at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:887:11)  
  at Loader.resolve (internal/modules/esm/loader.js:89:40)  
  at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)  
  at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)  
  at link (internal/modules/esm/module_job.js:75:36)

[mattgperry]

Ok and final question if you install and try to import { mix } from “popmotion” how does that go?

[pauloguerraf]

Hi,

Same issue here, I tried import { mix } from “popmotion” but it didn't work.

Let me now if there is anything else I can help testing.

[mattgperry]

I’ll have to look into it but if it’s not working with Popmotion either and it works in dev it sounds like Nuxt has a problem with exports in package.json

[philippmunzert]

Have this issue too, is there any workaround? tried a lot. My first try was to use motion plain with nuxt but it seems to the animation is fine within the first page load after I change the route and go back the animation will not fired again. motion/vue works fine with route change but with it I can not built the project.

Would really love to use motion in my nuxt3 project.

[NicolaSpadari]

+1 same issue, works fine in dev but as soon as I try to build it this happens

Edit: in the latest rc.8 dev mode doesn't even start, same error

[NicolaSpadari]

I finally found a workaround, import motion and/or presence from @motionone/vue/dist/motion-vue.ssr.js, then in nuxt.config.ts add this:

  export default defineNuxtConfig({
    // ...
    build: {
      transpile: ["motion/vue", "@motionone/vue"]
    }
  });

[favourwright]

@NicolaSpadari do you have any public minimal repo for Nuxt3 with "motion one" working? or anyone on this thread. I can't seem to get it working

[NicolaSpadari]

@favourwright here I made a stackblitz demo

[favourwright]

@favourwright here I made a stackblitz demo

it works with the plugin 🚀🚀🚀🚀🚀🚀!!! thank you for the timely response. you just saved a life

[productdevbook]

I prepared and rewrote vue 3 and nuxt 3 support. I will share the library soon.

[fristyr]

@NicolaSpadari How did you manage to solve this issue ? .output/server/chunks/app/_nuxt/index-5d6ce38a.mjs Did you mean to import motion/dist/vue.cjs.js?

[itpropro]

I prepared and rewrote vue 3 and nuxt 3 support. I will share the library soon.

Where was the package released @productdevbook and do you plan to contribute here with a PR?

[productdevbook]

I prepared and rewrote vue 3 and nuxt 3 support. I will share the library soon.

Where was the package released @productdevbook and do you plan to contribute here with a PR?

yes, I was planning to, but the intermediate Oku project came in. Maybe we can integrate it into the compass. Pergel

There are 5-6 more modules I want to do on the compass. I can add this later if I have time. Or someone can come and integrate it.

[mattgperry]

This is now a wontfix, see https://github.com/motiondivision/motionone/discussions/241

Hopefully future maintainers will have more time to take a look at this one!

[productdevbook]

Oku Motion

I have released the Vue version and I am also starting work on Nuxt.