CANNON including problem?

Questions
1

@RaananW

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.
WHAT I’M MISSING ??
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
problem:
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();

MY CONFIGURATION FILES ARE
---------- package.json ----------
{
“name”: “tswebpack4”,
“version”: “1.0.0”,
“description”: “https://appdividend.com/2018/03/18/how-to-setup-typescript-with-webpack-4/”,
“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”: [
“jquery”,
“babylonjs”,
“babylonjs-loaders”,
“babylonjs-gui”
],
},
“exclude”: [
“node_modules”
]
}

--------- 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/,
use:[‘style-loader’,‘css-loader’]
},
{
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([
{from:‘src/images’,to:‘images’}
]),
new copy_webpack_plugin([
{from:‘src/styles’,to:‘styles’}
])
,
new copy_webpack_plugin([
{from:‘src/assets’,to:‘assets’}
])
],
externals: {
//oimo: ‘OIMO’, //or true
//cannon: ‘CANNON’ //or true
//“oimo”: true,
"cannon": true
//“earcut”: true
}

};

2

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.

3

@RaananW

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
and
try
http://localhost:8080/

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)

BUT AS YOU SAY CANNON NAMESPACE IS A PROBLEM.

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 ?

4

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
5

@RaananW
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
6

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

in global JavaScript / TypeScript space.

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

4 Likes
7

Christopher_Stock’s solution worked for me

8

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.