Integration into browser broject using vite

[cminkwitz]

I recently came across this project. First of all thank you very much for the great work.

I had a little bit of trouble integrating it in a vue3 project. As Vue3 uses vite by default, i had some issues regarding the commonjs module structure that is generated using the current build method.
I think to use the -s MODULARIZE=1 was a very good idea. But using the .mjs output works even better. Vite also is capable of loading wasm files out of the box, so there is no need for the .bin hack.
I created tried to create a PR, but it seems i don't have the permissions to push a new branch. Mayby you could provide me with the permissions so i can push my code and could help to further improve the DX of the project.

[samsam2310]

Hi,

It is great that you would like to contribute! Just fork the project and you can create PR from your forked repo. Here is the official document.

Also I'm not sure what is the issue that you cannot use the current implementation. We have several issues discussed about using this in several frameworks. You may want to take a look.
My goal is creating a single solution for everyone. If it is not possible for what you are using, maybe we can have some patch. However, we also need to make sure that don't break other cases.

[wesbos]

@cminkwitz did you figure out how to import this with Vite?

[wesbos]

@samsam2310 Can you help me figure out how to make this work with Vite?

import { scanImageData } from 'zbar.wasm';

gives me:

ERROR: No loader is configured for ".bin" files: node_modules/zbar.wasm/dist/zbar.wasm.bin

I've tried importing all the exported node_module files directly but can't figure it out. Any help?

[wesbos]

Reduced test case posted here: https://github.com/wesbos/vite-wasm

[samsam2310]

Since the message is ERROR: No loader is configured , maybe you just need to config a loader for *.wasm.bin ?

[wesbos]

The fix for this ended up being to use the fork of this project that ships a ES Module version.

https://www.npmjs.com/package/@undecaf/zbar-wasm

I tried everything to get this one to work with Vite but I couldn't get it going. Vite is really cranky about importing URLs and I couldn't figure i tout.