React-jsonschema-form: Importing module breaks build (create-react-app / webpack)

[sirreal]

Prerequisites

• [x] I have read the documentation.
  

  Description

import Form from 'react-jsonschema-form' breaks app.

Steps to Reproduce

1. Initialize new project with create-react-app
2. Install react-jsonschema-form dependency and use it in the project.
3. Build/run app (npm start), open in browser to see error: `

Demo project available here: https://github.com/sirreal/broken-react-jsonschema-form
Relevant file: https://github.com/sirreal/broken-react-jsonschema-form/blob/master/src/App.js

The code is copied nearly verbatim from documentation:

import Form from "react-jsonschema-form";
const schema = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: {type: "string", title: "Title", default: "A new task"},
    done: {type: "boolean", title: "Done?", default: false}
  }
};
/* ... render() ... */
        <Form schema={schema}
          onChange={log("changed")}
          onSubmit={log("submitted")}
          onError={log("errors")}
        />
/* ... */

Expected behavior

See <Form /> component rendered

Actual behavior

App crashes with error:

browser.js:173 Uncaught Error: process.binding is not supported

Version

[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└─┬ [email protected]
  └── [email protected] 

node --version
v6.5.0

npm --version
3.10.7

[n1k0]

Well, works for me with the same CRA version...

Dunno where to look at to help you further.

[sirreal]

I also have no problem on OSX.

I'll try npm cache clean and rebuilding on the other machine tomorrow (Linux).

[sirreal]

There is clearly no problem with this module and there is something very strange going on with my machine.

FYI - reinstalling all modules (with npm cache clean) did not help.

Solution: run _the same code_ in a docker container with the same version of node and everything works fine.

[ghost]

Could this be related to https://github.com/facebookincubator/create-react-app/issues/815?

[sirreal]

@garudacrafts Yep, that's probably the culprit.

[ghost]

@sirreal Another work around (other than running in a container), would be to identify which node module is falling back to the native copy and add it as a direct dependency in your node_modules. See the latest comments in https://github.com/facebookincubator/create-react-app/issues/1023.

[Rajat421]

hi i am having the same issue with this package , I am using
next-Framework 2.0.1
react@latest
npm -v 3.10.10
node -v 6.10.2
how should i resolve it,

[ghost]

@Rajat421 As discussed in #1023, the issue was a system copy of a module was erroneously being used (e.g. in place of the copy installed as a dependency of another module in the project). This ended up happening with more than one module and it wasn't related to react-jsonschema-form or any other particular module. It was caused by a bug in react and the webpack build process. A workaround was to identify which module was doing this and install it as a direct dependency (simply npm install it to your project). You should be able to identify the culprit by investigating your stack trace. Another workaround was to unset NODE_PATH as per https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-264064040. Or you could try to re-install Node.js on your system using another method. But, I'm wondering why you're seeing this issue at all, since it was apparently fixed via https://github.com/facebookincubator/create-react-app/pull/1194. If you're still having problems related to this issue, then I'd suggest you post them there.

[algorithmhash]

If anyone is inquiring, yeah yarn is the same as npm :

 yarn cache clean

read this: https://yarnpkg.com/lang/en/docs/cli/cache/ .
Has a little bit more info on specific commands and what they do.