# Webpack-compliant imports for Cannon.js

**URL:** <https://forum.babylonjs.com/t/webpack-compliant-imports-for-cannon-js/9192>\
**Category:** Questions\
**Created:** [March 13, 2020, 7:33pm UTC](https://forum.babylonjs.com/t/webpack-compliant-imports-for-cannon-js/9192 "2020-03-13T19:33:48Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![earthendev](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/earthendev/32/34897_2.png) [@earthendev](https://forum.babylonjs.com/u/earthendev)\
**Post date:** [March 13, 2020, 7:33pm UTC](https://forum.babylonjs.com/t/webpack-compliant-imports-for-cannon-js/9192/1 "2020-03-13T19:33:48Z")

</div>

Hi Babylonians,

I have a problem that will hopefully be straightforward to solve. For a small project, I need to include cannon.js and the corresponding babylon plugin. For this project I am using webpack from the start. I installed everything through npm and then imported things this way:

```
import "cannon";
import CannonJSPlugin from "babylonjs";
import "@babylonjs/core/Physics/physicsEngineComponent";

```

(I am not very sure if that’s correct, probably CannonJSPlugin should also be in the @babylonjs/ tree somewhere, but I can’t find it…)

On the enablePhysics() line I get the following error in the browser console:  
TypeError: babylonjs\_\_WEBPACK\_IMPORTED\_MODULE\_14\_\_\_default.a is not a constructor

I suspect I am missing an import.

I really love the webpack interaction, but the documentation on package paths could definitely be improved (especially if this is in fact what’s causing this).

Thanks in advance!

---

<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:** [March 13, 2020, 8:49pm UTC](https://forum.babylonjs.com/t/webpack-compliant-imports-for-cannon-js/9192/2 "2020-03-13T20:49:01Z")

</div>

We normally allow the canon injection in the cannon plugin, you can have a look at:  
[https://doc.babylonjs.com/features/es6\_support#earcutoimocanon](https://doc.babylonjs.com/features/es6_support#earcutoimocanon)

---

<div class="post-metadata">

**Author:** ![earthendev](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/earthendev/32/34897_2.png) [@earthendev](https://forum.babylonjs.com/u/earthendev)\
**Post date:** [March 14, 2020, 7:22am UTC](https://forum.babylonjs.com/t/webpack-compliant-imports-for-cannon-js/9192/3 "2020-03-14T07:22:25Z")

</div>

Thank you for the pointer, but unfortunately that doesn’t seem to make a difference, unless I’m missing something. I added the following lines to my module.exports:

```
context: __dirname,
plugins: [
  new webpack.ProvidePlugin({
    'cannon': 'cannon'
  })
]

```

No difference. Is there anything else I have to change, i.e. import things differently or something? I only ever have used webpack with React, and there it’s very straightforward, therefore I don’t know much about how those plugin injections work.

To me it’s strange that it compiles perfectly but at runtime it’s missing the class.

---

<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:** [March 14, 2020, 3:13pm UTC](https://forum.babylonjs.com/t/webpack-compliant-imports-for-cannon-js/9192/4 "2020-03-14T15:13:01Z")

</div>

yup the easiest would be to share your repo on Github so we can have a look ???

---

<div class="post-metadata">

**Author:** ![earthendev](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/earthendev/32/34897_2.png) [@earthendev](https://forum.babylonjs.com/u/earthendev)\
**Post date:** [March 14, 2020, 8:53pm UTC](https://forum.babylonjs.com/t/webpack-compliant-imports-for-cannon-js/9192/5 "2020-03-14T20:53:42Z")

</div>

There you go:

> **[M. Wagner / Webpack Babylonjs sample code](https://gitlab.com/mbwagner/webpack-babylonjs-sample-code)**
>
> GitLab.com

If you remove line 60 in src/index.js it will run just fine. Only once scene.enablePhysics is called it tries to load a class that is _undefined_.

It took me a bit longer because I first had to figure out some unrelated webpack stuff before I got the example working 🤦‍♂️ It’s not the easiest “build system” to learn.

---

<div class="post-metadata">

**Author:** ![ycw](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ycw/32/4315_2.png) [@ycw](https://forum.babylonjs.com/u/ycw)\
**Post date:** [March 14, 2020, 10:13pm UTC](https://forum.babylonjs.com/t/webpack-compliant-imports-for-cannon-js/9192/6 "2020-03-14T22:13:04Z")

</div>

use named import

```auto
import { CannonJSPlugin } from "babylonjs";

```

---

<div class="post-metadata">

**Author:** ![earthendev](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/earthendev/32/34897_2.png) [@earthendev](https://forum.babylonjs.com/u/earthendev)\
**Post date:** [March 15, 2020, 9:43am UTC](https://forum.babylonjs.com/t/webpack-compliant-imports-for-cannon-js/9192/7 "2020-03-15T09:43:29Z")

</div>

Thank you! This pointed me in the right direction. There was still a different issue to solve (“CANNON” is not defined), but I managed that too.

My next attempt was combining this with the answer from [Cannon.js NPM "CANNON is not defined" in v4.0.0-alpha.21 but works in v4.0.0-alpha.16](https://forum.babylonjs.com/t/cannon-js-npm-cannon-is-not-defined-in-v4-0-0-alpha-21-but-works-in-v4-0-0-alpha-16/844)

Now the relevant lines look like this (the code has also been updated on gitlab):

```
import * as cannon from "cannon";
import { CannonJSPlugin } from "babylonjs"
// ...
scene.enablePhysics(null, new CannonJSPlugin(true, 10, cannon));

```

I also had to reinstall cannon somehow (npm install --save-dev cannon) or it would complain how it couldn’t find it, but now it works!

Thank you all! I hope this will help someone else in the future.