Unable to deploy example with box2d-wasm on Node.js hosting.

[8Observer8]

I can show the example code if needed, but there is some problem with the library itself. I tried to deploy on render.com It can be an issue of render.com

Jul 14 01:31:02 AM  ==> Starting service with 'node src/server/app.js'
Jul 14 01:31:04 AM  Listening at port: 10000
Jul 14 01:33:54 AM  /opt/render/project/src/node_modules/box2d-wasm/dist/umd/Box2D.simd.js:12
Jul 14 01:33:54 AM  p){f?d(f):c(p.buffer)})},1<process.argv.length&&process.argv[1].replace(/\\/g,"/"),process.argv.slice(2),process.on("uncaughtException",function(b){throw b;}),process.on("unhandledRejection",function(b){throw b;}),a.inspect=function(){return"[Emscripten Module object]"};else if(ea||fa)fa?ha=self.location.href:"undefined"!==typeof document&&document.currentScript&&(ha=document.currentScript.src),_scriptDir&&(ha=_scriptDir),ha=0!==ha.indexOf("blob:")?ha.substr(0,ha.replace(/[?#].*/,"").lastIndexOf("/")+
Jul 14 01:33:54 AM                                                                                                                                                      ^
Jul 14 01:33:54 AM  
Jul 14 01:33:54 AM  TypeError: Failed to parse URL from /opt/render/project/src/node_modules/box2d-wasm/dist/umd/Box2D.simd.wasm
Jul 14 01:33:54 AM      at Object.fetch (node:internal/deps/undici/undici:11576:11)
Jul 14 01:33:54 AM      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
Jul 14 01:33:54 AM    [cause]: TypeError [ERR_INVALID_URL]: Invalid URL
Jul 14 01:33:54 AM        at new NodeError (node:internal/errors:405:5)
Jul 14 01:33:54 AM        at new URL (node:internal/url:778:13)
Jul 14 01:33:54 AM        at new Request (node:internal/deps/undici/undici:7132:25)
Jul 14 01:33:54 AM        at fetch2 (node:internal/deps/undici/undici:10715:25)
Jul 14 01:33:54 AM        at Object.fetch (node:internal/deps/undici/undici:11574:18)
Jul 14 01:33:54 AM        at fetch (node:internal/process/pre_execution:252:25)
Jul 14 01:33:54 AM        at /opt/render/project/src/node_modules/box2d-wasm/dist/umd/Box2D.simd.js:29:275
Jul 14 01:33:54 AM        at /opt/render/project/src/node_modules/box2d-wasm/dist/umd/Box2D.simd.js:29:499
Jul 14 01:33:54 AM        at /opt/render/project/src/node_modules/box2d-wasm/dist/umd/Box2D.simd.js:30:11
Jul 14 01:33:54 AM        at file:///opt/render/project/src/src/server/init-box2d.js:7:9 {
Jul 14 01:33:54 AM      input: '/opt/render/project/src/node_modules/box2d-wasm/dist/umd/Box2D.simd.wasm',
Jul 14 01:33:54 AM      code: 'ERR_INVALID_URL'
Jul 14 01:33:54 AM    }
Jul 14 01:33:54 AM  }

I try to use physics on the server side. My example just creates a physical world on the server side and sends the gravity value to the client, and the client shows it.

init-box2d.js

import Box2DLib from "box2d-wasm";

export let box2d = null;

export function initBox2D() {
    return new Promise(resolve => {
        Box2DLib().then((re) => {
            box2d = re;
            resolve();
        });
    });
}

app.js

import express from "express";
import http from "http";
import path from "path";
import { WebSocketServer } from "ws";
import { box2d, initBox2D } from "./init-box2d.js";
import { makeMessage, serverEvents } from "../share/events.js"

const app = express();
app.use(express.static(path.join(process.cwd(), "public")));

const httpServer = http.createServer(app);
const wss = new WebSocketServer({ server: httpServer });
const port = process.env.PORT || 3000;
httpServer.listen(port, () => console.log("Listening at port: " + port));

wss.on("connection", client => {
    async function init() {
        await initBox2D();
        const {
            b2Vec2,
            b2World
        } = box2d;

        const gravity = new b2Vec2(0, -3);
        const world = new b2World(gravity);
        const g = world.GetGravity();
        console.log(g.x, g.y);
        client.send(makeMessage(serverEvents.outgoing.GRAVITY, JSON.stringify({ x: g.x, y: g.y })));
    }

    init();
});

This is a full code of my example that is ready to deploy on render.com: https://github.com/8Observer8/send-gravity-from-server-to-client-box2d-wasm-js

[Birch-san]

/opt/render/project/src/node_modules/box2d-wasm/dist/umd/Box2D.simd.wasm is a path, not a URL.

define a locateFile override when you construct your Box2DFactory, as per the importing box2d-wasm docs.

if NodeJS itself is retrieving the wasm (i.e. you are computing physics server-side), then you probably want to set this URL to return 'file:///opt/render/project/src/node_modules/box2d-wasm/dist/umd/Box2D.simd.wasm'.

otherwise, if it's a client accessing box2d.js via the Web, and the client wishes to run the .wasm in their own browser: you would want to return an http:// or https:// URL.

[8Observer8]

It seams like it is an issue for Render, because I deployed my example on Glitch and it works:

• Code https://glitch.com/edit/#!/merciful-regal-soursop
• Live site: https://merciful-regal-soursop.glitch.me

I used this initialization code without locateFile:

init-box2d.js

import Box2DLib from "box2d-wasm";

export let box2d = null;

export function initBox2D() {
    return new Promise(resolve => {
        Box2DLib().then((re) => {
            box2d = re;
            resolve();
        });
    });
}

I created the topic on Render forum: https://community.render.com/t/unable-to-deploy-example-with-box2d-wasm/13689

[8Observer8]

@Birch-san Thank you very much!

It is the solution for Render:

init-box2d.js

import Box2DLib from "box2d-wasm";

export let box2d = null;

export function initBox2D() {
    return new Promise(resolve => {
        Box2DLib({
            locateFile: (url, scriptDirectory) => "file:///opt/render/project/src/node_modules/box2d-wasm/dist/umd/Box2D.simd.wasm"
        }).then((re) => {
            box2d = re;
            resolve();
        });
    });
}

app.js

import { box2d, initBox2D } from "./init-box2d.js";

async function init() {
    await initBox2D();

    const {
        b2Vec2,
        b2World
    } = box2d;

    const gravity = new b2Vec2(0, -3);
    const world = new b2World(gravity);
    const g = world.GetGravity();
    console.log("gravity = ", g);
}

init();

[8Observer8]

Small update for localhost:

init-box2d.js

import Box2DLib from "box2d-wasm";

export let box2d = null;

export function initBox2D(localhost = true) {
    return new Promise(resolve => {
        Box2DLib({
            locateFile: (url, scriptDirectory) => {
                if (url.endsWith(".wasm") && !localhost) {
                    return "file:///opt/render/project/src/node_modules/box2d-wasm/dist/umd/Box2D.simd.wasm";
                }
                return scriptDirectory + url;
            }
        }).then((re) => {
            box2d = re;
            resolve();
        });
    });
}