Hi, I’m trying to use Havok in a StackBlitz Project but I’m having trouble initialising it.
The project is here:
I’m receiving the error shown below in the console and the code doesn’t progress past the await HavokPhysics() line.
preview-48ed283b9d5ba.js:2 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
preview-48ed283b9d5ba.js:2 falling back to ArrayBuffer instantiation
preview-48ed283b9d5ba.js:2 failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
preview-48ed283b9d5ba.js:2 Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0)
HavokPhysics_umd.js:9 Uncaught (in promise) RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -sASSERTIONS for more info.
at abort (HavokPhysics_umd.js:9:6495)
at eval (HavokPhysics_umd.js:9:8264)
Any idea what I’m doing wrong?
Sometimes I find the Stackblitz itself can cause issues, but I’m not sure if this is the cause here. CodePen, JS Fiddle, and StackBlitz all seem to have little gremlins that require imports to be done in a certain way I find - I’m not using the Babylon Playground because the final output needs to actually be CodePen and StackBlitz, and while I can get scenes to work in the playground, it’s the setup that’s giving me issues.
I have not tried this with StackBlitz, but that error often means you are missing your web assembly file WASM. It needs to be in the root of your project to work.
It generates automatically the first time you pull the latest source if using ES6 / Node. If using the precompiled babylonJS, I think it downloads itself if not in root. Both methods can be prone to error and failure.
The file itself is annoyingly a bunch of random alphanumeric digits.wasm. I kept trying to delete it when first getting havok to work thinking my webserver was hacked before I realized that was part of HAVOK redownloading itself without permission, like a suborn weed.
While I tried including the npm package, the code above is actually just pulling from the cdn.
Is that not expected to work?
I tried pulling from CDN on index instead of the TS file and that does work: BabylonJS Havok Test (forked) - StackBlitz, so I think that might be something specific from this StackBlitz? I’ll tag @RaananW who might have an idea
Thanks so much - I’ll play with that when I get a chance
TBH - I have no idea how stackblitz injects the ts file to the html file. Packing? compiling ts to js? where is it configurable?
@DaleDeSilva I hit a similar issue and found a hacky workaround to get the wasm loading correctly in StackBlitz (see BabylonJS Havok Test Vite - StackBlitz for a working example of your shared project).
I am not 100% sure if the issue is with the
@babylonjs/havok package, but this issue happens on every other browser IDE I tested, using webpack or rollup, and it works when the file is hard-coded as in the example, so I am wondering if the
HavokPhysics.wasm needs to be explicitly exported in the package to get it working everywhere.
I get what you are saying - and I have no problem adding it
Let me tinker around with it. I might release a new patch later today.
EDIT - just a note - this is probably happening because the package.json is not parsed correctly, or that the load is executed in the context in which it is loaded from and not the directory from which the file is read (i.e. Base directory instead of the esm or umd directory). The files are exported correctly, and are referenced correctly in package.json, but a solution might be to keep a copy of the wasm in the base directory as well.
I want to be able to test that before releasing a patch. but as I don’t know stackblitz that well, I don’t know if it is possible to use local npm packages. If i can’t find a solution for that I will probably release an alpha version and try it using the project initially pasted here.