Unable to import cannonjs plugin

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’),
}),
],
};
`

cc @RaananW and @Cedric

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?

1 Like

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.

1 Like

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

here is the source of the project

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

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

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