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

r.h.a.titulaer · February 7, 2020, 9:26am

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.

r.h.a.titulaer · February 7, 2020, 12:07pm

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

Any ideas on this?

Chuck_Driesler · February 8, 2020, 4:10am

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());
  });
}

r.h.a.titulaer · February 12, 2020, 11:04am

Thanks Chuck! any idea’s on this one?

r.h.a.titulaer · February 17, 2020, 11:42am

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

will · February 17, 2020, 8:04pm

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

github.com

mcneel/rhino3dm/blob/master/docs/javascript/samples/compute/RESTHopper/Extrusions/app.js

let args = {
    algo : null, 
    pointer : null,
    values : []
};

let definition = null;

// get slider values
let count = document.getElementById('count').value;
let radius = document.getElementById('radius').value;
let length = document.getElementById('length').value;

let param1 = new RhinoCompute.Grasshopper.DataTree('RH_IN:201:Length');
param1.append([0], [length]);

let param2 = new RhinoCompute.Grasshopper.DataTree('RH_IN:201:Radius');
param2.append([0], [radius]);

let param3 = new RhinoCompute.Grasshopper.DataTree('RH_IN:201:Count');

This file has been truncated. show original

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

r.h.a.titulaer · February 18, 2020, 9:31am

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?

r.h.a.titulaer · February 18, 2020, 9:32am

Hi Luis,

Could you make this available again?

I am puzzling around, but getting error after error.

Rick

Chuck_Driesler · February 18, 2020, 10:51pm

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.

r.h.a.titulaer · February 19, 2020, 9:06am

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

r.h.a.titulaer · February 19, 2020, 6:05pm

This example would be nice in Vue

I’m stuck.

r.h.a.titulaer · February 24, 2020, 10:14am

Hi all,

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

Please help

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.

Chuck_Driesler · February 24, 2020, 10:24pm

Whatever you’re using to generate your output html/js/css (vue-cli uses webpack) must copy the .wasm file to the same folder as the javascript that calls it. I can’t tell what you’re using from the screenshot/image provided.

Doesn’t look like your issue is your logic, just how packages are pointing to each other. Without seeing the full setup, I can’t troubleshoot that.