4

I'm building a Nuxt3 application where I need to import and use a 3rd party node package which internally is using webassembly.

In my case, the package I need is https://github.com/higumachan/lindera-js

Where do I import the package?

In one of my components, right at the beginning of the <script> tag. And afterwards I'm using it in one of the methods. (Note: I removed unnecessary code below)

<template>
...
</template>

<script>
import * as lindera from "lindera-js";

...

  methods: {
    doTranspile() {
      const tokenized= lindera.tokenize(this.input);
      console.log(tokenized);
    },
  },

...

</script>

What is the Problem?

After dev server compiles everything and I reload the page in the browser, I get the following error:

[vite] Internal server error: "ESM integration proposal for Wasm" is not supported currently.
Use vite-plugin-wasm or other community plugins to handle this.
Alternatively, you can use .wasm?init or .wasm?url.
See https://vitejs.dev/guide/features.html#webassembly for more details.

The Question

How can I use the package without problems in Nuxt3? Do I have to use vite-plugin-wasm and if so, how and where to use/import it? Or is there any other way to use a package which is using webassembly?

I found some similar questions on SO, but not sure if they can be used like this in Nuxt3 as I'm fairly new to Nuxt in general.

Alex Berger
  • 1,357
  • 1
  • 10
  • 22

1 Answers1

1

Install vite-plugin-wasm

npm i -D vite-plugin-wasm

Add the plugin in vite in the nuxt.config.ts

import wasm from 'vite-plugin-wasm';

export default defineNuxtConfig({
    vite: {
        plugins: [wasm()],
    },
});
select
  • 2,513
  • 2
  • 25
  • 36