CANNON including problem?


Hello, I would like to include cannon physics module.
But I beleve I have problem to configuration files this.
I red this Documentation NPM - Babylon.js Documentation
If I understand right. bundle.js (built js code) have problem with CANNON physics module.
Can anybody help me solve this problem. I need Help

I do npm build and npm start (it looks ok)
But in build bundle.js code have problem.
When I run http://localhost:8080/. in console I have
Uncaught ReferenceError: CANNON is not defined
at new e (bundle.js:149)
at Game…/src/Game.ts.Game.test (bundle.js:10643)
at bundle.js:10826

MY CODE IS in ts class have problem here:
-> let gravityVector = new BABYLON.Vector3(0, -5, 0);
-> let physicsPlugin = new BABYLON.CannonJSPlugin();

---------- package.json ----------
“name”: “tswebpack4”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“dependencies”: {
"babylonjs": “^4.0.0-beta.3”,
“babylonjs-gui”: “^4.0.0-beta.3”,
“babylonjs-loaders”: “^3.3.0”,
"cannon": “^0.6.2”,
“jquery”: “^3.3.1”,
“pepjs”: “^0.4.3”
“devDependencies”: {
@types/jquery”: “^3.3.29”,
@types/node”: “^11.12.0”,
“copy-webpack-plugin”: “^5.0.2”,
“css-loader”: “^2.1.1”,
“extract-text-webpack-plugin”: “^3.0.2”,
“file-loader”: “^3.0.1”,
“style-loader”: “^0.23.1”,
“ts-loader”: “^5.3.3”,
“typescript”: “^3.3.4000”,
“url-loader”: “^1.1.2”,
“webpack”: “^4.29.6”,
“webpack-cli”: “^3.3.0”,
“webpack-dev-server”: “^3.2.1”
“scripts”: {
“build”: “webpack”,
“start”: “webpack-dev-server --mode development”,
“test”: “echo “Error: no test specified” && exit 1”
“keywords”: [],
“author”: “”,
“license”: “ISC”

“keywords”: [],
“author”: “”,
“license”: “ISC”

---------- tsconfig.json ---------
“compilerOptions”: {
“outDir”: “./dist/”,
“sourceMap”: true,
“module”: “commonjs”,
“target”: “es5”,
“sourceMap”: true,
“types”: [
“exclude”: [

--------- webpack.config.js ---------
const webpack = require(‘webpack’);
const path = require(‘path’);
const copy_webpack_plugin = require(‘copy-webpack-plugin’);

module.exports = {
mode: “development”,
entry: ‘./src/index.ts’,
devtool: ‘inline-source-map’,
module: {
rules: [
test: /.tsx?/, loader: 'ts-loader', exclude: /node_modules/, }, { test:/\.css/,
test: /.(png|jpg|svg)/, use: [{ loader: 'url-loader', options: { limit: 8000, name: 'images/[hash]-[name].[ext]' } }] } ] }, resolve: { extensions: [".tsx", ".ts", ".js"] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', : ‘jquery’,
jquery: ‘jquery’
new copy_webpack_plugin([
new copy_webpack_plugin([
new copy_webpack_plugin([
externals: {
//oimo: ‘OIMO’, //or true
//cannon: ‘CANNON’ //or true
//“oimo”: true,
"cannon": true
//“earcut”: true


Hi Ian,

The first thing I noticed was this line - “cannon”: true .
How do you include cannon? do you use es(6) modules, or do you include CANNON directly? I assume you dont use modules, as I see you use the BABYLON namespace.
Try using “cannon”: “CANNON” , which will force webpack to use the global CANNON namespace for this variable.


I am using “babylonjs”: “^4.0.0-beta.3”

I do first

$ npm install --save cannon
( I have now in node_modules/cannon/… )

than I configure webpack.config.js
to add

externals: {
“cannon”: true

or as you advice me now

externals: {
“cannon”: “CANNON”

than I do build and start script (you can see in package.json
npm run build npm run start

I still have
Uncaught ReferenceError: CANNON is not defined
at new e (babylon.js:16)
at Game…/src/Game.ts.Game.test (Game.ts:95)
at index.ts:28

(As I understand I have OK installed cannon (which I do with npm install --save cannon)


Do you use es(6) modules, or do you include CANNON directly?
I don’t know? How do I know if I use es(6) modules ?
tsconfig.json has
target “es5” Do we need to include types of cannon in tsconfig.json or we don’t have to do anything for cannon module in tsconfig.json ?

Hi Ian,

you need to somewhere include the actual source of cannon (or at least let webpack know, that it needs to be included.
You can either inlude cannon as a script tag in your HTML (which will use the externals tag), or import it somewhere in your source code (import “cannon”), which will force webpack to include it in the source.

Externals will work if you go to the console and see the CANNON namespace. else you will need to import it yourself.

1 Like

What I do is in webpack.config.js:

new webpack.ProvidePlugin({
        CANNON: 'cannon'

and remove/comment
externals: {
//oimo: ‘OIMO’, //or true
cannon: “CANNON” //or true
now physics cannon physics works ok

1 Like

window.CANNON = require( 'cannon' );
( global as any ).CANNON = require( 'cannon' );

in global JavaScript / TypeScript space.

Solved the problem for me, without touching the Webpack Config.


Christopher_Stock’s solution worked for me

I had the exact same problem about a week ago. You can have a look at the example repo to see how I solved it. No need to touch the webpack config, and this is the crucial line that makes Babylon find everything:

import * as cannon from "cannon";

As far as I understand it, @Christopher_Stock’s solution should also work.