ES Module issue with Nuxt 3

[towerhufham]

In the current Nuxt 3 version, v3.0.0-rc.6, trying to import @animxyz/vue3 causes a warning and the server to stall out.

Steps I took: init a new Nuxt 3 project with nuxi. run yarn add @animxyz/vue3. Then I added this code to the /plugins folder:

import VueAnimXyz from '@animxyz/vue3'
import '@animxyz/core'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueAnimXyz);
})

When the server is launched, the message in the console reads:

(node:7804) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

It then stalls out for a while. After a few minutes, the console shows this and crashes:

<--- Last few GCs --->

[7804:000002D00B683ED0]    79978 ms: Mark-sweep (reduce) 4116.1 (4121.3) -> 4088.6 (4094.1) MB, 7.5 / 0.0 ms  (average mu = 0.925, current mu = 0.945) allocation failure scavenge might not succeed        
[7804:000002D00B683ED0]    80032 ms: Mark-sweep (reduce) 4116.4 (4121.8) -> 4116.4 (4121.6) MB, 12.6 / 0.0 ms  (average mu = 0.879, current mu = 0.767) allocation failure scavenge might not succeed       


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF7CC437A1F v8::internal::CodeObjectRegistry::~CodeObjectRegistry+114207
 2: 00007FF7CC3C6096 DSA_meth_get_flags+65542
 3: 00007FF7CC3C6F4D node::OnFatalError+301
 4: 00007FF7CCCFB2CE v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF7CCCE58AD v8::SharedArrayBuffer::Externalize+781
 6: 00007FF7CCB88C7C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1468
 7: 00007FF7CCB85D94 v8::internal::Heap::CollectGarbage+4244
 8: 00007FF7CCB83710 v8::internal::Heap::AllocateExternalBackingStore+2000
 9: 00007FF7CCBA1420 v8::internal::FreeListManyCached::Reset+1408
10: 00007FF7CCBA1AD5 v8::internal::Factory::AllocateRaw+37
11: 00007FF7CCBB71AB v8::internal::FactoryBase<v8::internal::Factory>::NewRawOneByteString+75
12: 00007FF7CC99AA2B v8::internal::String::SlowFlatten+395
13: 00007FF7CC704C8B v8::internal::WasmTableObject::Fill+603
14: 00007FF7CC8ECBC9 v8::internal::RegExp::ExperimentalOneshotExec+1161
15: 00007FF7CC8EC687 v8::internal::RegExp::Exec+199
16: 00007FF7CC8C853C v8::internal::DeclarationScope::was_lazily_parsed+21452
17: 00007FF7CCD88FC1 v8::internal::SetupIsolateDelegate::SetupHeap+494417
18: 00007FF7CCDE03B3 v8::internal::SetupIsolateDelegate::SetupHeap+851779
19: 00007FF7CCD7CB44 v8::internal::SetupIsolateDelegate::SetupHeap+444116
20: 000002D20D4BCCAC
error Command failed with exit code 134.

[ktx-drashti]

I'm also facing the same issue. Tried adding a module to build transpile in nuxt config but that didn't work:

  build: {
    transpile: ['@animxyz/vue3'],
  },

[codeflorist]

This should work:

build: {
    transpile: ['@animxyz/core', '@animxyz/vue3', 'clsx'],
},

[towerhufham]

This should work:

build: {
    transpile: ['@animxyz/core', '@animxyz/vue3', 'clsx'],
},

This worked perfectly, thank you! Probably something worth adding to the docs.

[codeflorist]

it's actually an issue with ESM compatibility and should be fixed by the animxyz-authors as described here: https://v3.nuxtjs.org/guide/going-further/esm#library-author-guide

[towerhufham]

In that case, reopening for visibility

[oeguenes]

This should work:

build: {
    transpile: ['@animxyz/core', '@animxyz/vue3', 'clsx'],
},

This worked perfectly, thank you! Probably something worth adding to the docs.

This didn't work for me at all. Can you please explain how you got this running with nuxt3? It seems like it's just using the css but attributes like "appear" or "appear-visible" don't have any effect.

I'm using nuxt 3.7.4 btw and animxyz/vue3 0.6.7

[Extarys]

The link posted by @codeflorist above changed location. New URL: https://nuxt.com/docs/guide/concepts/esm#library-author-guide