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

Trying to work with rhino3dm.js again, having trouble getting off the ground today. Following the instructions here.

When working from the node package (and when doing a manual download) I get the following pile of errors:

wasm is way above my head, so I tried instead to to do the first example, and got this:

cors

Any thoughts on what I might be missing?

Hey @Chuck_Driesler!

For the first one, how are you loading rhino3dm? As per the node sample, here’s how you can do it in a node application…

const rhino3dm = require('rhino3dm')

rhino3dm().then((rhino)=>{
    sphere = rhino.Sphere([0,0,0], 5)
})

For the second, I’m assuming you’re using python src/serve_javascript_lib.py and trying the new RESTHopper samples. I’ve just pushed a change to make those samples use a relative URL to rhino3dm.js and compute.rhino3d.js; Hopefully that fixes this for you :crossed_fingers:

For future reference, I’ve found http-server to be really handy for getting around CORS issues when testing things locally.

$ npm install http-server -g
$ http-server -p 8080 --cors
2 Likes

Thanks, this is super helpful. I managed to get the node sample working, on its own and with the added the code I was failing with.

I’m trying to use the node package in a Vue project, though, and am still having the same issues. Seems like my problem might be related to that. :upside_down_face:

Some early searching is calling out webpack as the culprit. Do you happen to have any experience/examples using the library with a framework? RESThopper used Ionic and v0.0.9 at the hackathon, but I’m still having no luck if I roll back to that.

Will tinker and report back, hoping for the best…

Edit: saving this here

Going to put a pin in this before I burn a whole week on it. Issue appears to be directly related to the vue-cli-service and way above my pay grade and level of expertise. Smells like fetch is being served some sort of optimised or compressed version of rhino3dm.wasm, but I’m having trouble confirming/fixing that.

Going to pursue alternate options. The help was v appreciated!

Sorry you’re still having trouble! If you have some code you can share (public or private) then we can have a go at figuring out the issue. I don’t have any experience with Vue.js myself but I think @fraguada might…

Totally! The project repo is here. The code block in question today is here.

I’ve already gotten it running outside of Vue, and that’s more than good enough for now. Would just be good to know what’s going on here. Will revisit after my deadline.

I was firing up a boilerplate vue project, but I’ll have to finish up in the morning CEST. Will report back then.

2 Likes

Really appreciated!

@Chuck_Driesler I (hastily) put together a sample using Vue + Vuetify. Unfortunately I ran out of time (before vacation) to properly reference rhino3dm and compute via npm and instead just copy them into the /public folder and reference them in the index.html. You can find it in the javascript/samples branch: https://github.com/mcneel/rhino3dm/tree/javascript/samples/samples/javascript/RESTHopper/ExtrusionsVue

When I get back I can fix how the project references these modules.

1 Like

This is perfect, I didn’t realize you could use the /public folder like that. Thanks for taking the time!

BTW, this is an adaptation of the https://github.com/mcneel/rhino3dm/tree/master/samples/javascript/RESTHopper/Extrusions sample in case you want to check the differences.

1 Like