Vite fails to build project with emoji-mart-vue

[steakscience]

Is anyone else getting this error? I'm using Nuxt, which uses Vite

[nitro 7:05:19 PM]  ERROR  RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)


1: <template>
   ^
2:   <div role="tablist" class="emoji-mart-anchors">
3:     <button


[7:05:19 PM]  ERROR  Unexpected token (Note that you need plugins to import files that are not JavaScript)

  at error (node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
  at Module.error (node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js:13674:16)
  at Module.tryParse (node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js:14405:25)
  at Module.setSource (node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js:14006:39)
  at ModuleLoader.addModuleSource (node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js:24523:20)

 ELIFECYCLE  Command failed with exit code 1.

[serebrov]

@steakscience Could you provide an example of the code or repository that reproduces the problem?

Also, maybe the error ("Note that you need plugins to import files that are not JavaScript") is correct and you need to add some plugins to import .vue files?

Might be related: #107, #140.

[steakscience]

@serebrov Here is an example repo (clean Nuxt starter with emoji-mart-vue) https://stackblitz.com/edit/nuxt-starter-avagg9?file=components%2FEmojiPicker.vue

Once we run build, it will fail

I will also look into plugins for importing .vue to see if that could be the cause.

[leonwisdom]

@steakscience I am also getting this error when building a nuxt 3 project. Did you manage to solve this?

This is my nuxt plugin for emoji mart:

import { Picker } from "emoji-mart-vue-fast/src";

const plugin = defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('Picker', Picker);
});

export default plugin;

[steakscience]

@leonwisdom I don't remember :D

[RickySharki]

@leonwisdom hey bro, I'm having the same problem as you.
I fixed it by adding this to nuxt.config.ts:
build: { transpile: ['emoji-mart-vue-fast'] }