Uncaught ReferenceError: arguments is not defined

JaimieVos commented 2 years ago

When I set up aframe physics and require it in my index.js and then run it with webpack I get the error "Uncaught ReferenceError: arguments is not defined" in my console.

NegInfinity commented 2 years ago

I experience the same problem.

Configuration: 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>

Upon running the scene in a browser, physics does not function and I get this sort of stack trace:

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)

albirrkarim commented 2 years ago

i have too

neki-tamo commented 2 years ago

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');

JaimieVos commented 2 years ago

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.
1. `npm install webworkify-webpack --save `

2. 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');

What if I want to use NPM with NodeJS?

n5ro / aframe-physics-system

Uncaught ReferenceError: arguments is not defined #201