broken compatibility with web

[APerricone]

Hello, I am trying to use box2d-wasm on web with webpack, but it does not compile because "Can't resolve 'fs'" I see https://stackoverflow.com/questions/59487224/webpack-throws-error-with-emscripten-cant-resolve-fs that the quicker solution is set -s ENVIRONMENT='web' and in you code I see "we used to use -s ENVIRONMENT=web for a slightly smaller build, until Node.js compatibility was requested in https://github.com/Birch-san/box2d-wasm/issues/8". The problem is that ok, you fix the compatibility with node.js but broke the compatibility with web... maybe it is necessary make more than one distribution, for me the better solution is 4:

• box2d-wasm-web
• box2d-wasm-node
• box2d-liquidfun-wasm-web
• box2d-liquidfun-wasm-web

because not everybody needs liquid simulation, honestly I don't want compile box2d-wasm, because to do this I need to install a lot of tools that I don't need for anything else...

[Birch-san]

box2d-wasm is compatible with the Web platform. it works without any bundling at all.

the expressions that are exploding for you are require("fs") and require("path").

the Web platform will not execute these expressions, because they are gated by NodeJS platform detection: if (typeof process.versions.node === 'string').

the problem you have is that webpack is trying to polyfill the NodeJS standard library unnecessarily (doesn't understand that it's polyfilling unreachable code).

try telling it not to polyfill those libraries:

webpack.config.js

module.exports = {
  // …
  resolve: {
    fallback: {
      fs: false,
      path: false
    }
  }
};

This technique worked for me in webpack 5.

The same fix but for Rollup can be found here.

not everybody needs liquid simulation

mainline box2d (i.e. without liquidfun) is the primary supported release. you can install via:

npm i --save box2d-wasm@4.0.1

liquidfun releases have a distinct versioning convention, 4.0.1-liquidfun.0.

[APerricone]

Thank you very much for the answer, adding them to "resolve fallback" works, webpack does the bundle. I have still issue because it Box2DFactory trying to download the wasm from file:// instead than from http://... but it is another problem, I will try to fix it my own.

I see that the 4.0.1 was released lite and with liquidfun together at the same time, so they are the same version, I think that could be better if they are 2 different npm packages because npm install the last version without care the suffix, but it's just my opinion that doesn't matter :)

For me this issue is closed, Thanks

---

Edit: solved, thanks to https://github.com/Birch-san/box2d-wasm/blob/master/docs/00-importing-box2d-wasm.md

[rob-myers]

module.exports = {
  // …
  resolve: {
    fallback: {
      fs: false,
      path: false
    }
  }
};

Would you mind adding this webpack fix to the documentation e.g. here?

I ran directly into this problem using Next.js.