Compatibility with webpack

[b1r3k]

Seems it doesn't work with builds done by webpack. Works fine until I'll request npm run build for the App. npm start:dev doesn't throw though app is not bootstrapping

App packages.js

{
  "name": "experiments-editor",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "./node_modules/mocha/bin/mocha --compilers js:babel-core/register --require ./test/test_helper.js 'test/**/*.@(js|jsx)'",
    "test:watch": "npm run test -- --watch",
    "build": "webpack --optimize-minimize --optimize-occurrence-order --optimize-dedupe --production",
    "start:dev": "node ./src/server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.7.6",
    "babel-loader": "^6.2.4",
    "chai": "^3.4.0",
    "chai-immutable": "^1.4.0",
    "jsdom": "^9.9.1",
    "mocha": "^3.2.0",
    "react-hot-loader": "^3.0.0-alpha.8",
    "redux-devtools": "^3.2.0",
    "redux-devtools-dock-monitor": "^1.1.1",
    "redux-devtools-log-monitor": "^1.0.11",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-es2015-loose": "^8.0.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "classnames": "^2.2.0",
    "css-loader": "^0.26.1",
    "immutable": "^3.7.5",
    "lodash": "^4.12.0",
    "randomcolor": "^0.5.0",
    "react": "^15.4",
    "react-addons-pure-render-mixin": "^15.4",
    "react-addons-update": "^15.5.2",
    "react-dimensions": "^1.1.1",
    "react-dom": "^15.4",
    "react-jsonschema-form": "https://github.com/b1r3k/react-jsonschema-form/tarball/anyof-prototype",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.1",
    "react-toastr": "^2.8.2",
    "redux": "^3.5.1",
    "redux-logger": "^2.6.1",
    "redux-saga": "^0.14.3",
    "style-loader": "^0.13.1"
  }
}

lib package.js

{
  "name": "react-jsonschema-form",
  "version": "0.41.1",
  "description": "A simple React component capable of building HTML forms out of a JSON schema.",
  "scripts": {
    "build:readme": "toctoc README.md -w",
    "build:lib": "rimraf lib && cross-env NODE_ENV=production babel -d lib/ src/",
    "build:dist": "rimraf dist && cross-env NODE_ENV=production webpack --config webpack.config.dist.js --optimize-minimize",
    "build:playground": "rimraf build && cross-env NODE_ENV=production webpack --config webpack.config.prod.js --optimize-minimize && cp playground/index.prod.html build/index.html",
    "dist": "npm run build:lib && npm run build:dist",
    "lint": "eslint src test",
    "publish-to-gh-pages": "npm run build:playground && gh-pages --dist build/",
    "publish-to-npm": "npm run build:readme && npm run dist && npm publish",
    "start": "node devServer.js",
    "tdd": "cross-env NODE_ENV=test  mocha --compilers js:babel-register --watch --require ./test/setup-jsdom.js test/**/*_test.js",
    "test": " cross-env NODE_ENV=test   mocha --compilers js:babel-register --require ./test/setup-jsdom.js test/**/*_test.js",
    "postinstall": "postinstall-build --only-as-dependency lib --script build:lib"
  },
  "main": "lib/index.js",
  "files": [
    "dist",
    "lib"
  ],
  "engineStrict": false,
  "engines": {
    "npm": "^2.14.7",
    "node": ">=6"
  },
  "peerDependencies": {
    "react": "^15.0.0"
  },
  "dependencies": {
    "jsonschema": "^1.0.2",
    "lodash.topath": "^4.5.2",
    "postinstall-build": "^3.0.1",
    "setimmediate": "^1.0.5"
  },
  "devDependencies": {
    "atob": "^2.0.3",
    "babel-cli": "^6.18.0",
    "babel-core": "^6.18.2",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.2.7",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-class-properties": "^6.18.0",
    "babel-plugin-transform-object-rest-spread": "^6.16.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-register": "^6.18.0",
    "chai": "^3.3.0",
    "codemirror": "^5.20.2",
    "cross-env": "^2.0.1",
    "css-loader": "^0.23.1",
    "eslint": "^2.13.1",
    "eslint-plugin-react": "^4.2.3",
    "estraverse": "^4.2.0",
    "estraverse-fb": "^1.3.1",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "gh-pages": "^0.11.0",
    "html": "0.0.10",
    "jsdom": "^8.3.0",
    "mocha": "^2.5.3",
    "postinstall-build": "^3.0.1",
    "react": "^15.0.0",
    "react-addons-test-utils": "^15.3.2",
    "react-codemirror": "^0.2.3",
    "react-dom": "^15.3.2",
    "react-transform-catch-errors": "^1.0.0",
    "react-transform-hmr": "^1.0.1",
    "redbox-react": "^1.3.3",
    "rimraf": "^2.6.1",
    "sinon": "^1.17.6",
    "style-loader": "^0.13.1",
    "toctoc": "^0.2.3",
    "webpack": "^1.13.3",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-hot-middleware": "^2.13.2"
  },
  "directories": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mozilla-services/react-jsonschema-form.git"
  },
  "author": "Nicolas Perriault <[email protected]>",
  "keywords": [
    "react",
    "form",
    "json-schema"
  ],
  "license": "Apache-2.0",
  "homepage": "https://github.com/mozilla-services/react-jsonschema-form#readme"
}

Ouput from npm run build for the App

$ npm run build

> [email protected] build /home/lukasz/workspace/commercial/keepsafe/switchboard-editor
> webpack --optimize-minimize --optimize-occurrence-order --optimize-dedupe --production

Warning: ToastMessage.animation: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
resolve failed for "caniuse-db": Error: Cannot find module 'caniuse-db'
resolve failed for "babel-runtime": Error: Cannot find module 'babel-runtime'
resolve failed for "webpack-core": Error: Cannot find module 'webpack-core'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
sh: 0: Illegal option --
{ Error: Command failed: sh -c --optimize-occurrence-order

    at ChildProcess.<anonymous> (/home/lukasz/workspace/commercial/keepsafe/switchboard-editor/node_modules/postinstall-build/index.js:53:13)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
  killed: false,
  code: 2,
  signal: null,
  cmd: 'sh -c --optimize-occurrence-order' }
Hash: 8754c3d3585cf5e4ee1f
Version: webpack 1.15.0
Time: 13308ms
        Asset       Size  Chunks             Chunk Names
    bundle.js     569 kB       0  [emitted]  main
bundle.js.map  248 bytes       0  [emitted]  main
   [0] multi main 40 bytes {0} [built]
    + 844 hidden modules

....

npm ERR! Linux 4.9.0-2-amd64
npm ERR! argv "/home/lukasz/.nvm/versions/node/v6.10.0/bin/node" "/home/lukasz/.nvm/versions/node/v6.10.0/bin/npm" "run" "build"
npm ERR! node v6.10.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `webpack --optimize-minimize --optimize-occurrence-order --optimize-dedupe --production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script 'webpack --optimize-minimize --optimize-occurrence-order --optimize-dedupe --production'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the experiments-editor package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --optimize-minimize --optimize-occurrence-order --optimize-dedupe --production
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs experiments-editor
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls experiments-editor
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/lukasz/workspace/commercial/keepsafe/switchboard-editor/npm-debug.log

npm-debug.log.txt

[exogen]

At first glance the issue doesn't appear related to postinstall-build.

According to webpack, the option name is --optimize-occurence-order (note their misspelling), not --optimize-occurrence-order (correct spelling, but not an option). Can you see if that does anything?

The resolve failed messages are another question; I'd need to be able to build the project to help repro, but can't with only the package.json. If it's public then I'm happy to help!

[b1r3k]

@exogen thank you for fast response. Unfortunately it seems to be related with postinstall-build, double-checked that. Here is basic setup in order to reproduce it: https://github.com/b1r3k/postinstall-build-bughunt it uses lib https://github.com/b1r3k/react-jsonschema-form and when branch is set to anyof-prototype-postinstallbuild (default) npm run build (for App) is failing as aforementioned. anyof-prototype will work without issues` (via npm link)

[exogen]

This is a really interesting bug and has taken some crazy turns debugging it!

I made a more minimal repro here: https://github.com/exogen/postinstall-build-bughunt

Note that react-jsonschema-form is not necessary to repro, nor are most of the dependencies. In fact the entry point is now completely empty, but still triggers the bug.

postinstall-build (the direct experiments-editor dependency, not react-jsonschema-form's) is being run by something whenever webpack is run. Even if we kill the webpack arguments (just run webpack), it will succeed, but postinstall-build is secretly still being run silently.

I narrowed it down to es2015-loose. There seems to be a bug with the combination of that preset + babel-loader. If you change it to es2015, or downgrade es2015-loose to 6.x, it works. I'm not sure whether es2015-loose 8.x (the version in your package.json) is intended to work with the rest of the Babel toolchain at 6.x or not.

[exogen]

It looks like that preset is deprecated: https://www.npmjs.com/package/babel-preset-es2015-loose

I'm still curious enough to track down why it's randomly running a script it found, but the first thing I'd do is ditch that.

[exogen]

After some debugging, I've found that the module underlying babel-preset-es2015-loose, modify-babel-preset, is just totally insane.

I put a console.log here to see what it was trying to require. Sure enough, it attempts to require almost everything under node_modules as part of some bizarre (and unnecessary) module resolution ritual. This a really bad assumption to make – that requiring a random module won't have side effects (like say, starting up a server – or running a script in postinstall-build's case).

So I'm happy to report that postinstall-build is not at fault after all! I could add one bit of protection for faulty requires like this though: if I check require.main == module before actually doing anything, it'll detect whether postinstall-build is being run as the main script or not. Alternatively, I could separate the CLI script from package.json:main, so that requiring postinstall-build has no side effects.

[exogen]

#18 was released in v4.0.0, which should be safe to use if you decide to keep using babel-preset-es2015-loose. Thanks for the bug report!