Unable to load Havok plugin (error while loading .wasm file from browser)

Hi, I fail to use Havok physic engine in a new Angular project (babylon 6). I followed the documentation, it compiles, but at runtime I have the following error :

Chrome :
havok.ts:3 Not allowed to load local resource: file:///media/.../my-project/node_modules/@babylonjs/havok/lib/esm/HavokPhysics.wasm

Firefox :
Security Error: Content at http://localhost:4200/ may not load or link to file:///media/…/my-project/node_modules/@babylonjs/havok/lib/esm/HavokPhysics.wasm.

The browser tries to load a file directly on file system, which is not the expected behavior and create a security issue. How to avoid this situation ?

Step to reproduce :

  • create a new angular project, add a canvas in the html
  • npm i @babylons/havok (and other babylon packages)
  • update the component as below
import {Component, OnInit} from '@angular/core';
import {Engine, HavokPlugin, Scene, Vector3} from "@babylonjs/core";
import {IPhysicsEngine} from "@babylonjs/core/Physics/IPhysicsEngine";
import HavokPhysics from "@babylonjs/havok";

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent implements OnInit {
  title = 'test-havok';

  ngOnInit(): void {
    const canvas = document
      .getElementById('gameCanvas') as HTMLCanvasElement;
    const engine = new Engine(canvas, true);
    const scene = new Scene(engine);
    HavokPhysics().then(havok => {
      const havokPlugin = new HavokPlugin(true, havok);
      scene.enablePhysics(new Vector3(0, -9.81, 0), havokPlugin);
      this.init(engine, scene);

  init(engine: Engine, scene: Scene): void {
    let physEngine: IPhysicsEngine | null = scene.getPhysicsEngine();
    if (!physEngine) {
      throw new Error("Unable to get physic engine");
    } else {
      engine.runRenderLoop((): void => {

1 Like

try adding this in your htaccess file

AddType application/wasm wasm

Adding a .htaccess file in the src directory containing AddType application/wasm wasm do change anything.

Does change or doesn’t change?

Sorry, it does NOT change anything :slight_smile:

I may be saying nonsense, but wouldn’t that be a question of the order of your imports.

The physics engine must be imported before the Babylon engine. This is what must be done when using the <script src=“” tag.

import {Component, OnInit} from '@angular/core';
import {IPhysicsEngine} from "@babylonjs/core/Physics/IPhysicsEngine";
import HavokPhysics from "@babylonjs/havok";
import {Engine, HavokPlugin, Scene, Vector3} from "@babylonjs/core";

It’s just an idea.

In this case, import order does not matter.

I suspect a webpack configuration problem : we need 1) to embed the .wasm in the bundle OR 2) retrieve the .wasm with a HTTP request, but we must not read it from file system.

I tryed to configure webpack with custom-webpack package, using specific wasm loader, and import the wasm file in the project but I fail to get something compiling.
This thread is interesting but I still do not work : webassembly - How can I make webpack embed my *.wasm for use in a web worker? - Stack Overflow

1 Like

This is your webpack config (or webpack version). It should do that automatically.
What webpack are you using? how does your config look like?

I created a recent Angular project (v15), behind the hood Angular use Webpack and I think it is a very recent version, and there is no configuration available for the user by default. So : it does not work “out of the box”.

In an Angular project, in particular situation like this one, we still can customize the webpack configuration, which is what I am trying to do with the custom-webpack package, but as I previously said, I fail to get something even compiling as soon as I try to import the .wasm directly.

I also checked this repository : GitHub - oktinaut/babylonjs-typescript-starter: Sample BABYLON.js application using Typescript and Webpack
But I fail to understand why it is working, and not in an Angular project.

The import is part of the js file that is imported, so the build system should process that for you. If you want to share the project so we can see what happened, we might be able to work. But I can show examples of webpack-based projects that work well.

Clone this repo : GitHub - ylacaute/angular-babylon-havok-test: Show case to show that .wasm is not loaded
ng serve
And in the browser you will notice the error.

In fact, I will not use Angular anymore so I am now opened to any new solution. Sadly, for now :

  • With my current Project in Angular : build is fast, but Havok is not working
  • With only Webpack like this repository : Havok works, but the build is 4x longer for the exact same code, and the hot reload is broken half the time
  • I also tried to use Parcel : extremely fast build, works until I add Havok which is even not compiling :
    16 | import {IPhysicsEngine} from "@babylonjs/core/Physics/IPhysicsEngine";
  > 17 | import HavokPhysics from '@babylonjs/havok';
  >    |                          ^^^^^^^^^^^^^^^^^^

@parcel/resolver-default: Could not load './lib/esm/HavokPhysics.js' from module '@babylonjs/havok' found in package.json#module

UPDATE : It works with Parcel if I update the import like this :
import HavokPhysics from '@babylonjs/havok/lib/esm/HavokPhysics_es.js';

I wonder if we have an issue in the package .json, seeing this:
This file doesn’t exist, only with _es . i’ll check

1.0.1 should have a fix for that. Can you check?

Yes the fix 1.0.1 fix the import with Parcel, I can now use import HavokPhysics from "@babylonjs/havok"; as described in the documentation, well done !

This fix however do not change anything to the initial problem with Angular.

This seems to be an issue with angular dev server’s configuration. When building for prod (using the common configuration and 1.0.1 of havok), the wasm file is included in the build and the build works (doesn’t fail like in the dev server).
It seems like the way they read the package is incorrect. TBH - I have no idea why they are doing this, but when loading the package it is added as file://*** (but the source is still included).
I guess it is a question for angular. The angular configuration is quite complex, to be honest. and it is not that simple to change the webpack config. They also add a few flags that I don’t quite understand, but I am not going to dive too deep into that.
Sorry I can’t help! I would ask angular. You can gladly tag my user (RaananW) so I get notifications regarding the issue. If there is anything we can do on our package to make sure they support it, I will be happy to do it.

1 Like