How to load webassembly file in Vue?

Question

I have compiled the C code using this command emcc add.c -o js_plumbing.js -s -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap'] -s MODULARIZE=1

This is my Vue component code -

 public instance:any = {
      ready: new Promise(resolve => {
        Module({
          onRuntimeInitialized() {
            this.instance = Object.assign(this, {
              ready: Promise.resolve()
            });
            resolve();
          }
        });
      })
    };


    public draw_outline() {
       this.instance.ready
      .then(_ => this.result_web = this.instance.addTwoNumbers(2,2));
    }

draw_outline is getting called when I click on a text element.

And this is the error I'm getting -

So after this error I went to generate file and just added export to the module and this error disappears. but now my function in C "addTwoNumbers" is not getting called from instance.

if I print the value of instance I get Does anyone know how to proceed from here?

its probably best to debug from the browser, as the error doesn't seem to be generated from the piece of code pasted — Prany, Feb 20 '20 at 12:07
Do you have some approach in mind? I'm new to wasm and have been on this for 2 days. — Yash Gaur, Feb 20 '20 at 12:12
Go to developer tools (F12), inside source tab search for your project files, put breakpoint and debug — Prany, Feb 20 '20 at 12:14
if you are using chrome then you can install Vue.js devtools, and can step through your code as well — Prany, Feb 20 '20 at 12:16
Okay, I shall try that. But do you have any views regarding the last screenshot? I mean what is that output or what do you think it is — Yash Gaur, Feb 20 '20 at 12:24

Yash Gaur · Accepted Answer · 2020-02-24T11:49:41.760

I figured that when compiling I needed to use USE_ES6_IMPORT_META=0 flag so that WebAssembly module will use an older version of the import.meta.url line of code for systems that don't recognize the import style. so the command looks like emcc add.c -o js_plumbing.js -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap'] -s ENVIRONMENT='web,worker' -s EXPORT_ES6=1 -s MODULARIZE=1 -s USE_ES6_IMPORT_META=0

This is my updated code -

 Module().then(myModule => {  
        const result = myModule.ccall('addTwoNumbers',
            'number',
            ['number', 'number'],
            [4, 6]);
         console.log("Value from wasm file", result);
        });

My config file -

const path = require('path');
const contentBase = path.resolve(__dirname, '..', '..');

module.exports = {
    configureWebpack: config => {

        config.devServer = {
            before(app) {
                // use proper mime-type for wasm files
                app.get('*.wasm', function (req, res, next) {
                    var options = {
                        root: contentBase,
                        dotfiles: 'deny',
                        headers: {
                            'Content-Type': 'application/wasm'
                        }
                    };
                    res.sendFile(req.url, options, function (err) {
                        if (err) {
                            next(err);
                        }
                    });
                });
            }
        }   
    },
}

It is inside a function that I call on a click event . I can elaborate the whole process if someone is interested. It should not take this much time for anyone, I hope it helps others who have been looking for the solution. I realise I have not properly stated the problem in this post, I shall update everything here in a proper way soon.

How to load webassembly file in Vue?

1 Answers1