require is not defined when using nuxtjs/composition-api

[kylemod]

Versions

nuxt-vite: 0.0.37
nuxt: 2.15.4

Reproduction

A fresh install of nuxt app and nuxtjs/composition-api

Description

It just says require is not defined at http://localhost:3000/@fs/my/storage/path/nuxt-vite/node_modules/@nuxtjs/composition-api/dist/register.js?v=c9e46a53:3:13 in my console

And when i use a hook like onMounted, my terminal printed ERROR [Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().

[yaiks]

Hey @kylemod, I've also run into this issue and I guess this is a bug on the @nuxt/composition-api library. I opened an issue there with my findings, feel free to jump in and talk about your experience.

[kylemod]

Closing issue. See rework composition api registration

[manoj-mukherjee-maersk]

img if using require giving same error <img :src="require(~/assets/icons/${menuItem.iconName}.svg)" />
any solution?

[justice47]

img if using require giving same error <img :src="require(~/assets/icons/${menuItem.iconName}.svg)" />
any solution?

Did you found a solution?
I'm running into this too

[cyanerd]

img if using require giving same error <img :src="require(~/assets/icons/${menuItem.iconName}.svg)" /> any solution?

same problem. did u find any solution?

[kayoderock]

@cyanerd you are most likely using Vite for your packing.

[kayoderock]

In template:
<img class="bp-icon" :src="imgUrl" alt="">

In the script:
mounted () { this.imgUrl = new URL(../assets/img/${this.icon}.svg, import.meta.url) }