Unable to compile .wasm from npm package, <script> in index head blocked by CORS

Admittedly it isn’t using npm imports, but @gtalarico1 seems to be doing things slightly differently.

1 Like

This problem is still haunting me, but I took another stab while tinkering with wasm. No fixes, but new discovery: it seems that whatever vue is using for build/serve is ignoring npm wasm files or putting them in the wrong place.

Sharing for posterity. Still chiseling away

I was having issues with this because of webpack. I ended up having to just place a copy of the js/wasm combo in a statics directory.

1 Like

What are you using to serve files locally?

Defaults with the current vue cli:

Got tunnel vision and figured it out. Example repo here.

Magic webpack config:

vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    configureWebpack: {
      output: {
          publicPath: "/"
        },
      plugins: [ 
          new CopyWebpackPlugin([ { from: 'node_modules/rhino3dm/rhino3dm.wasm', to: 'js/' } ]) 
        ],
    }
}

This appears to be a hacky way to force any emscripten generated wasm to hop over whatever webpack is trying to do with it (which is still unclear).

2 Likes

I am trying the same, with the Extrusions resthopper for Vue, but don’t get it to work with the WASM. Any clue? or example ? The one shared doesn’t seem to have the app.js somewhere.

Do you mind sharing your code? Will help me pin down what might be different in your setup.

Yes! Thanks. I am quite new to vue environment. So i might missed something. I am able to run the example above now. But still wondering why I get the error.

Also I came across the following error, trying to use my own Grasshopper ghx file.

Any ideas on this?

Difficult to tell from what’s provided. Sorry I know that’s not helpful.

One common reason you get the first error you posted is when the .wasm file doesn’t make it to the same directory as your javascript files. Most wasm compilers will assume it’s there, because that’s what they generate, and attempt to fetch with just the file name. See snippet from what rhino3dm.js is shipping rn (comments by me):

var wasmBinaryFile = 'rhino3dm.wasm';  /* file name to search for */
if (!isDataURI(wasmBinaryFile)) {
  wasmBinaryFile = locateFile(wasmBinaryFile);
}

/* ... */

function getBinaryPromise() {
  if (!wasmBinary && (ENVIRONMENT_IS_WEB || ENVIRONMENT_IS_WORKER) && typeof fetch === 'function') {
    return fetch(wasmBinaryFile, { credentials: 'same-origin' }).then(function(response) { /* where the fetch happens */
      if (!response['ok']) {
        throw "failed to load wasm binary file at '" + wasmBinaryFile + "'";
      }
      return response['arrayBuffer']();
    }).catch(function () {
      return getBinary();
    });
  }
  return new Promise(function(resolve, reject) {
    resolve(getBinary());
  });
}

Thanks Chuck! any idea’s on this one?

Hi all,

When I try my own GHX file, i get the following error:

So changing the Grasshopper script, inputs / outputs. Anyone seen this error?

Rick

We added some functionality to the JS Compute client library for evaluating grasshopper definitions. Take a look at this sample…

The evaluateDefiniton() function takes care of base64 encoding for you, so hopefully it will solve this problem!

1 Like

Thanks Will! I got my script working from one of the codes above ( which now seems unavailable). Is there a Vue example using this functionality of JS compute?

Hi Luis,

Could you make this available again?

I am puzzling around, but getting error after error.

Rick

Hey, just a heads up that the code you provided last time wasn’t actually using any rhino3dm. If you can point me to the code that’s giving you some issues I can be a bit more helpful.

You are right. I don’t know what happened haha. Attached the code. I managed to get this to work, but not use other Grasshopper scripts. Maybe my arrangement of the Vue is wrong? The app.js from extrusions above is quite different. (I tried using this piece of code, but couldn’t get it to work).

Would be nice if someone can provide an example.

https://github.com/rick5087/rhinocomputevue

This example would be nice in Vue :smiley:

I’m stuck.

Hi all,

Almost able to run it, but now running into the WASM again…

Please help :slight_smile:

Rhino.zip (2.1 KB)

Solved:

So I was able to solve it.

I firstly installed npm i --save compute-rhino3d and rhino3dm.

Then in those folders i found (nodemodules):

So i downloaded those and copied them in. This works.