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

**URL:** <https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289>\
**Category:** Questions\
**Tags:** havok\
**Created:** [April 27, 2023, 10:03am UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289 "2023-04-27T10:03:08Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ylacaute](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ylacaute/32/31802_2.png) [@ylacaute](https://forum.babylonjs.com/u/ylacaute)\
**Post date:** [April 27, 2023, 10:03am UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/1 "2023-04-27T10:03:08Z")

</div>

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/](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

```typescript
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";

@Component({
  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 => {
        scene.render();
      });
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [April 27, 2023, 10:38am UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/2 "2023-04-27T10:38:04Z")

</div>

try adding this in your htaccess file

`AddType application/wasm wasm`

---

<div class="post-metadata">

**Author:** ![ylacaute](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ylacaute/32/31802_2.png) [@ylacaute](https://forum.babylonjs.com/u/ylacaute)\
**Post date:** [April 27, 2023, 10:44am UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/3 "2023-04-27T10:44:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [April 27, 2023, 1:08pm UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/4 "2023-04-27T13:08:11Z")

</div>

Does change or doesn’t change?

---

<div class="post-metadata">

**Author:** ![ylacaute](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ylacaute/32/31802_2.png) [@ylacaute](https://forum.babylonjs.com/u/ylacaute)\
**Post date:** [April 27, 2023, 1:09pm UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/5 "2023-04-27T13:09:41Z")

</div>

Sorry, it does NOT change anything 🙂

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [April 27, 2023, 1:42pm UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/6 "2023-04-27T13:42:22Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![ylacaute](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ylacaute/32/31802_2.png) [@ylacaute](https://forum.babylonjs.com/u/ylacaute)\
**Post date:** [April 27, 2023, 2:47pm UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/7 "2023-04-27T14:47:21Z")

</div>

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](https://stackoverflow.com/questions/70420273/how-can-i-make-webpack-embed-my-wasm-for-use-in-a-web-worker)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 27, 2023, 2:54pm UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/8 "2023-04-27T14:54:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ylacaute](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ylacaute/32/31802_2.png) [@ylacaute](https://forum.babylonjs.com/u/ylacaute)\
**Post date:** [April 27, 2023, 3:06pm UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/9 "2023-04-27T15:06:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ylacaute](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ylacaute/32/31802_2.png) [@ylacaute](https://forum.babylonjs.com/u/ylacaute)\
**Post date:** [April 27, 2023, 3:18pm UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/10 "2023-04-27T15:18:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 27, 2023, 3:33pm UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/11 "2023-04-27T15:33:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ylacaute](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ylacaute/32/31802_2.png) [@ylacaute](https://forum.babylonjs.com/u/ylacaute)\
**Post date:** [April 27, 2023, 3:41pm UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/12 "2023-04-27T15:41:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ylacaute](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ylacaute/32/31802_2.png) [@ylacaute](https://forum.babylonjs.com/u/ylacaute)\
**Post date:** [April 27, 2023, 9:03pm UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/13 "2023-04-27T21:03:54Z")

</div>

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](https://github.com/oktinaut/babylonjs-typescript-starter) : 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 :

```auto
    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';`

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 28, 2023, 10:02am UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/14 "2023-04-28T10:02:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 28, 2023, 10:12am UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/15 "2023-04-28T10:12:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ylacaute](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ylacaute/32/31802_2.png) [@ylacaute](https://forum.babylonjs.com/u/ylacaute)\
**Post date:** [April 28, 2023, 12:34pm UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/16 "2023-04-28T12:34:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [May 2, 2023, 9:24pm UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/17 "2023-05-02T21:24:43Z")

</div>

Assigned @RaananW on May 2, 2023, 9:24pm UTC



---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 3, 2023, 11:55am UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/18 "2023-05-03T11:55:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 3, 2023, 11:55am UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/19 "2023-05-03T11:55:54Z")

</div>

Unassigned @RaananW on May 3, 2023, 11:55am UTC



---

<div class="post-metadata">

**Author:** ![PavelRomanov](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@PavelRomanov](https://forum.babylonjs.com/u/PavelRomanov)\
**Post date:** [June 14, 2023, 8:30am UTC](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/20 "2023-06-14T08:30:41Z")

</div>

Hi guys! For anybody still facing this issue with Angular or any other framework.

We can use CDN import instead of using NPM packages [link](https://doc.babylonjs.com/features/featuresDeepDive/physics/havokPlugin#the-havok-physics-engine) and declare the constant like so

```ts
declare const HavokPhysics: () => Promise<unknown>;

```

That way you should be able to use it without any problems

[Next page](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289.md?page=2)