'Uncaught ReferenceError when using aframe-physics with ammo.js, npm and webpack

Overview:

I'm trying to get ammo.js physics work in an aframe projects that is built using npm and webpack. I need ammo.js, because cannon.js refers depcrecated .Geometry component from threejs, and this has to be done via npm, because I need access to three-pathfinding, which only comes in form of npm package.

Problem: Upon launching compiled project I run into this error message in console, and physics do not work:

index.js:1 Uncaught ReferenceError: arguments is not defined
    at eval (index.js:1:16)
    at Object../node_modules/webworkify/index.js (bundle.js:775:1)
    at __webpack_require__ (bundle.js:819:41)
    at eval (worker-driver.js:3:18)
    at Object../node_modules/@engaging-computing/aframe-physics-system/src/drivers/worker-driver.js (bundle.js:218:1)
    at __webpack_require__ (bundle.js:819:41)
    at eval (system.js:8:20)
    at Object../node_modules/@engaging-computing/aframe-physics-system/src/system.js (bundle.js:238:1)
    at __webpack_require__ (bundle.js:819:41)
    at eval (index.js:13:1)

Current setup:

Package.json

{
  "name": "a-frame-min-3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "serve": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "file-loader": "^6.2.0",
    "path-browserify": "^1.0.1",
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "dependencies": {
    "@engaging-computing/aframe-physics-system": "^4.0.2",
    "aframe": "^1.3.0",
    "aframe-extras": "^6.1.1",
    "ammo.js": "github:mozillareality/ammo.js#hubs/master",
    "three-to-cannon": "^4.0.2"
  }
}

webpack.config.js:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        globalObject: 'this'
    },
    experiments: {
        asyncWebAssembly: true
    },
    node: {
    },
    resolve:{
        fallback: {
            fs: false,
            path: require.resolve( 'path-browserify' )
        }
    },
    module:{
        rules:[
{
    test: /\.(wasm)$/,
    type: "javascript/auto",
    use: {
        loader: "file-loader",
        options: {
            outputPath: "wasm", //set this whatever path you desire
            name: "[name]-[hash].[ext]"
        }
    }
}
        ]
    }
};

src/index.js

const Ammo = require("ammo.js/builds/ammo.wasm.js");
const AmmoWasm = require("ammo.js/builds/ammo.wasm.wasm");
window.Ammo = Ammo.bind(undefined, {
  locateFile(path) {
    if (path.endsWith(".wasm")) {
      return AmmoWasm;
    }
    return path;
  }
});

require("aframe")
require('@engaging-computing/aframe-physics-system')
require("aframe-extras")

dist/index.html

<html>
<head>
    <script src="bundle.js"></script>
</head>
<body>
    <a-scene physics="driver: ammo; debug: true; debugDrawMode: 1;" vr-mode-ui="enabled: true; arEnabled: false;">
        <a-sky id="sky" color="#aaaaaa"></a-sky>
        <a-entity id="sun" 
            light="intensity: 0.6; castShadow: true; shadowCameraTop: 18.85; shadowCameraRight: 18; shadowCameraBottom: -15.18; shadowCameraLeft: -14.27"
            position="7.97348 9.14859 8.98681">
        </a-entity>     
        <a-entity id="ambient" light="color: #a3a3a3; type: ambient" id="ambient"></a-entity>
        <a-entity id="rig" 
            position="0 0 0" 
            movement-controls
            >
            <a-entity id="camera" camera position="0 1.6 0" look-controls></a-entity>
        </a-entity>
        <a-entity 
            id="testsphere" 
            geometry="primitive: sphere; radius: 0.5" 
            material=""
            position="-5 5 -18" 
            shadow=""
        ></a-entity>
        <a-entity 
            id="testsphere2" 
            geometry="primitive: sphere; radius: 0.5" 
            material=""
            position="-3 5 -18" 
            shadow=""
        ></a-entity>
        <a-entity 
            id="ground" 
            geometry="primitive: plane; height: 100; width: 100" 
            rotation="0 0 0" 
            position="0 -1 0"
            visible="false" 
            shadow=""
        ></a-entity>
    </a-scene>
</body>
</html>

Solution 1:^[1]

I have found a workaround for this issue. Seems to me that webworkify only works with browserify. If you want to use webpack, there is a webworkify-webpack package which solves this problem.

npm install webworkify-webpack --save
edit ./node_modules/aframe-physics-system/src/drivers/worker-driver.js and modify 1st line to:

var webworkify = require('webworkify-webpack'),
    webworkifyDebug = require('./webworkify-debug'),
    Driver = require('./driver'),
    Event = require('./event'),
    worker = require('./worker'),
    protocol = require('../utils/protocol');

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	nekiTamoTip

'Uncaught ReferenceError when using aframe-physics with ammo.js, npm and webpack

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]