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

@fraguada did you manage to get the library working as an npm import in a Vue project? The /public workaround worked, but Iā€™m running into the same issue again when trying to work with Vue + Typescript.

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.