Search code examples
webpackphysijs

Physijs-webpack library fails by require

In the 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 at "npm run build" saying: Module not found: Error: Can't resolve 'physijs-webpack'

In the console (Chrome dev tools) 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 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 recommend, what am I 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/

    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. 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.

    The old, not-working NPM version (v0.0.2) will also be unpublished shortly to avoid confusion like this.

    On your Webpack config:

    The other answer here says to update your Webpack config, but 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.

    On the 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 I was granted ownership of the physijs-webpack NPM package.

    On the three integration:

    Another thing I noticed was that three is in your package.json. While this was required for the earlier, not-working version, in the current working version, it is now a peerDependency. You don't need to pass THREE as an argument anymore, but you will still need to install it since most usage of PhysiJS requires you to use THREE anyway. It has also been pinned to the r73 release of THREE because that was the last version PhysiJS supported / had compatibility for.