Error message encountered: "Unresolved ReferenceError while employing aframe-physics alongside ammo.js, npm, and webpack."

Summary:

I am currently attempting to integrate ammo.js physics into an aframe project built with npm and webpack. The reason for needing ammo.js is because cannon.js relies on a deprecated .Geometry component from threejs. This integration must be done through npm as I require access to three-pathfinding, which is only available as an npm package.

Issue:

Upon launching the compiled project, I encounter the following error in the console, leading to non-functional physics:

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

Package.json

{
  "name": "a-frame-min-3",
  "version": "1.0.0",
  "description": "",
  ...
  

webpack.config.js:

const path = require('path');
     module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            ...
        },
        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",
               name: "[name]-[hash].[ext]"
              }
           }
         ]
       }
    };

index.js:

...

dist/index.html

...

Answer №1

I recently discovered a solution to the issue at hand. It appears that webworkify is only compatible with browserify. If you prefer using webpack, there is a useful webworkify-webpack package available to resolve this issue.

  1. npm install webworkify-webpack --save 
  2. Open up
    ./node_modules/aframe-physics-system/src/drivers/worker-driver.js
    and make a modification to the first line:
var webworkify = require('webworkify-webpack'),
    webworkifyDebug = require('./webworkify-debug'),
    Driver = require('./driver'),
    Event = require('./event'),
    worker = require('./worker'),
    protocol = require('../utils/protocol');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Activate real-time highlighting by clicking on the search button

I created a simple program that searches for a value within a div and displays the first location of the word. However, I am looking to enhance it by highlighting all repeated locations of the searched word after pressing the search button. <html> & ...

Setting up a autoRotate toggle feature in three.js using dat.gui - a step-by-step guide

I am currently working on a project involving 3 planets positioned next to each other. I have implemented a slider to independently move them along each axis and have set up an autoRotate feature. However, I am facing difficulty in integrating it as a togg ...

Guide on positioning components to the right side of the NavigationDrawer in Vuetify with VueRouter

Working on my VueJS project, I've implemented a system to display content based on the user login using Firebase and Vuex state management. When a user is logged in, the content is shown using the v-if directive. Currently, I have successfully placed ...

Top method for obtaining base64 encoding of an image in Angular or Node.js

Looking to obtain Base64 data for images. Currently utilizing Angular 6 on the frontend and NodeJS on the backend. Should I extract the Base64 string on the frontend or is it better to handle conversion on the backend before returning it to the frontend? ...

I must iterate through two loops and incorporate delayed iterations within the inner loop

My goal is to create a process that involves looping through two sets of elements using for loops, with a delay on each iteration of the inner loop. However, I want to avoid having the animations queue up. The ideal scenario would be to trigger each eleme ...

I'm having trouble with Google Map InfoWindows not displaying when clicked within a loop

I'm facing an issue where the info window on Google Map API doesn't open on click within a loop, although all info windows show with an outside click event. var map; function initMap() { var mapProp = { center: new google.maps.LatLng( ...

Form submission using AJAX is failing to send the data correctly

I've been struggling with this particular piece of code for days now, and any assistance would be greatly appreciated. The issue I'm facing is that the script successfully calls the PHP file upon hitting the submit key, but it fails to post the ...

Tips for continuously randomizing colors in p5.js

I recently began exploring p5.js and I have a query regarding color randomization. Currently, it seems that the color only changes randomly when I restart the code. Is there a way to trigger this randomization every time the mouse is clicked? Below is the ...

The issue I'm facing with Angular 8 is that while the this.router.navigate() method successfully changes the URL

As someone who is relatively new to Angular, I am currently in the process of setting up the front end of a project using Angular 8. The ultimate goal is to utilize REST API's to display data. At this point, I have developed 2 custom components. Logi ...

How can I detect breaks in intervals?

Consider the following ranges as examples: const ranges = [ [ 0, 10, ], [ 20, 30, ], [ 40, 50, ], ]; In this scenario, I am looking to identify the missing ranges between two given values. For instance, if the input ran ...

Learn how to incorporate objects into the state of your Redux React application with my example

I am dealing with an issue in my Redux store where I am trying to add an object to an array. I need to verify if any element in the array shares the same id as the id in the payload - if not, I want to push the object to the array. The initial state of t ...

How can I turn off the animation for a q-select (quasar select input)?

I'm just starting out with Quasar and I'm looking to keep the animation/class change of a q-select (Quasar input select) disabled. Essentially, I want the text to remain static like in this image: https://i.stack.imgur.com/d5O5s.png, instead of c ...

Export keyword came out of the blue

Hey there, I've encountered an error while setting up the bottom material tab navigator. I've looked into it extensively but can't pinpoint the exact cause of the issue. https://i.sstatic.net/TtGIf.png import React, { Component } from &a ...

One method to add a hashtag before a variable in the HTML attribute value data-bs-target

Basically, I have set up a vue web application with a container containing multiple bootstrap cards. Each card has a button that is supposed to collapse a form for guests to apply. However, the issue arises when I click on the button of one card, as it col ...

Restructure the array to align with the corresponding elements in another

I am looking to filter an array based on ids from another array. Specifically, I have an array of tweet ids associated with a certain hashtag in the object I'm working with. h.tweet_ids = [*someTweetID*, *someOtherTweetID*, …] On the other hand, I ...

I am struggling to resolve this "parsererror" issue with my ajax request

I am currently working on implementing ajax with django. However, I am encountering an error in the response. When I send a request to the views using ajax and create a model, I encounter issues during the process of creation. It seems like there may be a ...

Javascript/Jquery - Eliminating line breaks when transferring text to a textarea by copying and pasting

Is there a method to paste text into a textarea that will automatically remove any line breaks or whitespaces? For instance, if I copy the following text and paste it into the textarea: abcdef, ghijkl, mnopqrs I would like it to appear in the textarea as ...

Is there a way to load an image onto the ngx-image-cropper without triggering the imageChangedEvent event?

My latest project involved creating a custom cropper using ngx-image-cropper, which allows for cropping and rotating images. For the sprint demo, I needed the images to be displayed as soon as the application loads without having to trigger the fileChangeE ...

When transitioning in Vue, pagination bullets shift to the left upon changing routes

While using Vue 3 and swiper.js, I encountered an issue where the pagination bullets move to the left when the route changes (component unmounted). It appears that the styling for the bullets and active button also disappear. I have created a reproduction ...

The jCapSLide Jquery Plugin is experiencing compatibility issues in Chrome browser

While this JQuery plugin works perfectly in Internet Explorer and Firefox, it seems to be malfunctioning in Chrome. The plugin is not being recognized at all by Chrome, and the captions are appearing below the image instead of on top with a sliding effect. ...