Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to embed .wasm as a base64 string in JavaScript file #831

Open
Ayrx opened this issue Apr 18, 2020 · 5 comments
Open

Option to embed .wasm as a base64 string in JavaScript file #831

Ayrx opened this issue Apr 18, 2020 · 5 comments

Comments

@Ayrx
Copy link

Ayrx commented Apr 18, 2020

💡 Feature description

wasm-pack currently generates code similar to the following in --target nodejs where the .wasm file is read from the disk.

const path = require('path').join(__dirname, 'foo.wasm');                                                                                                                                              
const bytes = require('fs').readFileSync(path);      

I would like an option to embed the .wasm bytes as a base64 encoded string in the generated JS file that is then decoded and loaded when the JS program runs. This would be useful in scenarios where the JS engine is embedded as a scripting environment as the concept of "reading files from disk" does not work.

@Pauan
Copy link
Contributor

Pauan commented Apr 18, 2020

Note that this must be added to wasm-bindgen first, before it can be added to wasm-pack.

@webmaster128
Copy link

As far as I know, embedding Wasm as a string is the only way to be able to use the same package for browsers, bundlers and Node.js.

@SabrinaJewson
Copy link

SabrinaJewson commented Oct 26, 2021

Note that if you're using Webpack, you can work around this like so:

In webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.wasm$/,
                type: "asset/inline",
            },
        ],
    },
    plugins: [
        new WasmPackPlugin({
            extraArgs: "--target web",
        }),
    ],
    // ...
};

In your Javascript file:

import initWasm, { /* other wasm imports */ } from "[path to crate]/pkg/index";
import wasmData from "[path to crate]/pkg/index_bg.wasm";
initWasm(wasmData);

Once the promise returned by initWasm resolves, the WASM module will have been loaded.

@BenjaminLesne
Copy link

Based on this comment, this issue prevents my nextjs project to load parquetjs.

Is there any work around?

I tried @SabrinaJewson 's solution but could not find the required crateDirectory I should give to the WasmPackPlugin constructor.

@GrinZero
Copy link

This is a very common requirement, I can't figure out why wasm-pack isn't handling it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants