Importing kzg-wasm into the vue project prompts that the module cannot be found

[iteyelmp]

import {loadKZG} from 'kzg-wasm'; const kzg = await loadKZG(); console.log(kzg)

Nodejs: v18.15.0
Vue: 2.6.11

[holgerd77]

Hi there, the library is still in very active development and most recent releases were breaking. Which version are you using?

[iteyelmp]

the latest 0.3.1.

[holgerd77]

Ok, so I plainly installed the latest library version and tested your test code in the console. So that works.

Can you provide us either with a repository link or some script which causes the issue to occur? Otherwise we will likely not be able to reproduce your error.

[nand2]

Hi!

Ok I have something similar about the module "module" :
When compiling with Vite, I get :

[plugin:vite:resolve] Module "module" has been externalized for browser compatibility, imported by "/home/nand/Code/web3protocol/dblog/node_modules/kzg-wasm/dist/esm/kzg.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

Looking at the doc referenced, it says that it tries to load a nodejs module. Indeed, in the kzg.js file, we can see a const {createRequire:a}=await import("module");, which, if I read it correctly, is not used (see no use of createRequire).

So I guess removing this bit of code will not break anything, and remove these warnings/errors about the "module" module?

Edit: I did not read it correctly lol. But I see a big if/else block to change behavior depending of whether we are in nodejs or browser, and Vite bundler is not catching that. So I guess it a matter of telling the bundler to ignore that... So probably not a bug for this project itself!

[nand2]

Ok so it is dirty, but I used on vite.config.js

export default defineConfig({
  resolve: {
    alias: {
      module: "./index.js"
    }
  },
})

Aliasing module to a random file, since I know it will never be called. Warning and "module" placeholder goes away.

If this project is strictly for browser, and not for nodejs, maybe removing the big if/else and the code related to nodejs?

Thanks!

[acolytec3]

This is a multi-platform library and we use it within a variety of nodejs contexts within our core libraries. Unfortunately, I'm limited by what the emscripten toolchain provides for the wrapper code that loads the wasm binary and that big if/else block is just a chunk of the compiled JS code that the toolchain provides. Will discuss with the team about possible providing separate nodejs and web bundles.

[nand2]

Thanks, no worries, this is a minor thing, your project is already very great!

[acolytec3]

@nand2 Can you try updating your version of the kzg-wasm dep to this git variant git://github.com/ethereumjs/kzg-wasm#b978927 and then remove your aliasing and see if everything builds okay? I'm working on a PR that adds a browser key to the package.json exports map and adding a browser specific version of the wrapper code that removes the references to nodejs builtins. I validated that it works on a NextJS app I built locally and curious if this solves the issue for your Vue app as well.

[nand2]

Hi @acolytec3 !
Thanks! I confirm it works with the Vue/Vite app : no more aliasing needed, and an additional useless JS file that was created by the bundler is now no longer created : everything works great!

[acolytec3]

Have just released v0.4.0 to NPM so you should be able to update your dependencies. Make sure you use tree shaking! The wasm + trusted setup in the module are hefty and duplicated across each build so it's not a small dep unfortunately.