Search code examples
javascriptnpmwebpackphysijs

Physijs-webpack library fails by require

In my web application I already have some packages declared with require and understood by webpack:

  • three
  • three-orbit-controls

This is how I use it:

var THREE = require('three');

var OrbitControls = require('three-orbit-controls')(THREE);

To add physics, I try to add library physijs-webpack:

var PhysiJS = require('physijs-webpack')(THREE);

It fails during npm run build saying: Module not found: Error: Can't resolve 'physijs-webpack'

In the console (Chrome dev tools), the following error is displayed:

"app.js:17 Uncaught Error: Cannot find module "physijs-webpack"
    at webpackMissingModule (app.js:17)
    at Object.defineProperty.value (app.js:17)
    at __webpack_require__ (bootstrap 460ca68f8e6f1e90ea58:19)
    at Object.<anonymous> (html5-entities.js:190)
    at __webpack_require__ (bootstrap 460ca68f8e6f1e90ea58:19)
    at module.exports.ctor.super_ (bootstrap 460ca68f8e6f1e90ea58:62)"

This is my webpack.config.js file:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/js/app.js',
    devtool: 'inline-source-map',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/dist'
    }
};

Dependencies are:

"devDependencies": {
    "script-loader": "^0.7.0",
    "webpack": "^3.5.4",
    "webpack-dev-server": "^2.7.1",
    "yarn": "^0.27.5"
},
"dependencies": {
    "physijs": "^0.0.4",
    "physijs-webpack": "^0.0.2",
    "requirejs": "^2.3.4",
    "three": "^0.86.0",
    "three-orbit-controls": "^82.1.0"
}

Could you please explain what I am doing wrong?

Solution

  • tl;dr - you had been using a broken build that was published by someone else. Use v0.1.0 or above and read the directions at https://github.com/agilgur5/physijs-webpack/

    historical context

    Hi there, I'm the creator of the physijs-webpack repo.

    Per an old version of the README and this Twitter thread, my port had been a work-in-progress with a failed build up until September 2018, when I decided to give it a shot again. Someone else had published my repo with a broken build to NPM without telling me, so the package you originally found on NPM was broken.

    In September 2018, I rewrote most of the repo and managed to figure out a way to get it to work. At that time, I asked people to install via agilgur5/physijs-webpack as I did not have control of the NPM package.
    Later that month, I was granted control of the package and have now published a v0.1.0 and v0.1.1 that have a successful and working build. The old, not-working NPM version (v0.0.2) has also been unpublished to avoid confusion like this.

    Now you can install via physijs-webpack and follow the directions of the package or repo to get it working -- i.e. also install worker-loader as a devDependency:

    npm i -D worker-loader
npm i physijs-webpack

    dependencies and configuration

    three integration

    I noticed was that three is in your package.json. It is now a peerDependency and has also been pinned to the r73 release of THREE because that was the last version PhysiJS supported / had compatibility for:

    "three": "^0.73.0",

    You also don't need to pass THREE as an argument anymore as physijs-webpack will import it itself:

    var Physijs = require('physijs-webpack');
    physijs NPM package

    I also noticed you had physijs in your package.json. That NPM package was created by the same person and was a duplicate of the physijs-webpack. It was unpublished in September 2018 at the same time as I was granted ownership of the physijs-webpack NPM package.

    You should remove that extraneous dependency as such.

    Webpack configuration

    The other answer here says to update your Webpack config, but, per my comment, that is incorrect and extraneous (it doesn't even have a .worker.js extension).
    physijs-webpack actually specifically and intentionally uses an in-line loader so that you don't have to update your Webpack config at all.