Unable to import cannonjs plugin

Questions
, ,
1

I am follwoing the Physics doc but I am not able to inlcude cannonjs keep getting this following error

Uncaught ReferenceError: CANNON is not defined
    at new CannonJSPlugin (cannonJSPlugin.js:21:82)
    at new App (app.ts:85:27)
    at eval (app.ts:299:1)
    at ./src/client/app.ts (bundle.js:1:9047386)
    at __webpack_require__ (bundle.js:1:26021875)
    at bundle.js:1:26034378
    at bundle.js:1:26034422

I have followed this CANNON including problem? - #5 by Ian_Sheehan but nothing seems works for me. I am using the latest webpack that doesn’t supports externals also tried import * as CANNON from 'cannon'; / import * as cannon from 'cannon';
but no luck. last thing I have tried window.CANNON = require('cannon'); in my index.d.ts file.

my webpack config
`
const path = require(‘path’);
const fs = require(‘fs’);
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const TerserPlugin = require(‘terser-webpack-plugin’);
const appDirectory = fs.realpathSync(process.cwd());

const babelOptions = {
presets: [
[
‘@babel/preset-env’,
{
targets: {
browsers: [‘>0.25%’, ‘not ie 11’, ‘not op_mini all’],
},
modules: false,
},
],
],
};

module.exports = {
entry: path.resolve(appDirectory, ‘src/client/app.ts’), //path to the main .ts file
// mode: ‘development’, //production
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘bundle.js’,
},
resolve: {
extensions: [‘.tsx’, ‘.ts’, ‘.js’],
},
devServer: {
host: ‘0.0.0.0’,
port: 8080, //port that we’re using for local host (localhost:8080)
static: path.resolve(appDirectory, ‘public’), //tells webpack to serve from the public folder
hot: true,
devMiddleware: {
publicPath: ‘/’,
},
},
module: {
rules: [
// {
// test: /.tsx?$/,
// use: “ts-loader”,
// exclude: /node_modules/,
// },
{
test: /.ts(x)?$/,
exclude: /node_modules/,
use: [
{
loader: ‘babel-loader’,
options: babelOptions,
},
{
loader: ‘ts-loader’,
},
],
},
{
test: /.css$/,
use: [‘style-loader’, ‘css-loader’],
},
{
test: /.json$/,
loader: ‘json-loader’
},
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: ‘asset/inline’,
use: [
{
loader: ‘url-loader’,
options: {
limit: 8192,
},
},
],
},
{
test: [/.vert$/, /.frag$/],
use: ‘raw-loader’,
},
{
test: /.(woff|woff2|eot|ttf|otf)$/i,
type: ‘asset/resource’,
},
],
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: false,
terserOptions: {
compress: true,
output: {
comments: false,
},
},
}),
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
inject: true,
template: path.resolve(appDirectory, ‘public/index.html’),
}),
],
};
`

2

cc @RaananW and @Cedric

3

Hey @shohan4556,
It would be great if you could share your repo or some more informations.
How do you add cannon to your project? What version of Webpack do you use?

4

Exactly. It is impossible to know what’s wrong if we don’t see your code.

Just wanted to quickly add that adding ANYTHING to your index.d.ts will do nothing, because this is just a declaration file. You probably wanted to add it to index.ts instead to make sure the line actually executes.

5

I am using “webpack”: “^5.73.0”,

6

here is the source of the project

7

here is the repo GitHub - shohan4556/knife-hit-babylonjs
plesae check, what I have missed ?

8

@RannanW I have added import * as CANNON from 'cannon'; this line in my app.ts/index.ts. but doesn’t works.

9

I solved it by adding window.CANNON = require('cannon'); in my app.ts/index.ts