Create-react-app: After ejecting getting "process.binding is not supported" error

[brakowski]

Description

After ejecting a newly created app, and try to open it in the browser, i get a "Uncaught Error: process.binding is not supported" in the browser.

Expected behavior

It should work the same like before ejecting.

Actual behavior

An "Uncaught Error: process.binding is not supported" error is displayed in the browser console.

Environment

1. Operating system: Linux Mint 17 Qiana
2. Browser and version: Google Chrome 47.0.2526.111 (64-bit)
3. Node: v6.2.1
4. NPM: 2.11.3
   ### Reproducible Demo
5. create-react-app test-app
6. cd test-app
7. npm run eject
8. npm start

Seems like "usr/lib/nodejs" is also bundled by webpack. The whole error message:

Uncaught Error: process.binding is not supportedprocess.binding
@ browser.js:173(anonymous function)
@ buffer.js:4(anonymous function)
@ buffer.js:1293__webpack_require__
@ bootstrap e7633f287f581d8681cb:555fn
@ bootstrap e7633f287f581d8681cb:86(anonymous function)
@ querystring.js:6__webpack_require__
@ bootstrap e7633f287f581d8681cb:555fn
@ bootstrap e7633f287f581d8681cb:86(anonymous function)
@ url.js:61__webpack_require__
@ bootstrap e7633f287f581d8681cb:555fn
@ bootstrap e7633f287f581d8681cb:86(anonymous function)
@ webpackHotDevClient.js:22__webpack_require__
@ bootstrap e7633f287f581d8681cb:555fn
@ bootstrap e7633f287f581d8681cb:86(anonymous function)
@ bootstrap e7633f287f581d8681cb:578__webpack_require__
@ bootstrap e7633f287f581d8681cb:555(anonymous function)
@ bootstrap e7633f287f581d8681cb:578(anonymous function)
@ bootstrap e7633f287f581d8681cb:578

[amilajack]

Try updating your npm version to the latest version

npm cache clean
npm i -g npm

It could have to do with how some dependencies have not been installed correctly.

[brakowski]

But it works without ejecting.

Edit: cache clean and update of npm did not solve the issue

[gaearon]

Can you reliably reproduce it with absolutely new app?

[gaearon]

Okay, this stack trace is super valuable.

Looks like this has something to do with webpackHotDevClient pulling in url pulling in querystring pulling in some sort of broken Buffer polyfill.

Can anybody else reproduce this?

[brakowski]

Yes i just now tried again. Did start the server before ejecting and it works fine, after ejecting the above mentioned error is thrown.

[brakowski]

Ok found it out, adding 'url' as devDependency solves the issue.

[gaearon]

This is weird. Our end-to-end test runs start after eject on npm 2.15.9, and Travis log seems fine.

I also can’t reproduce it locally with npm 3, although it’s worth trying with your specific version:

[gaearon]

Please post output of:

npm ls url
npm ls querystring
npm ls buffer

after running in the ejected project in broken state.

[brakowski]

npm ls url

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

npm ls querystring

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

npm ls buffer

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

After installing url:

npm ls url

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

npm ls querystring

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

Buffer stays the same.

[gaearon]

I likely won’t have time to dive into this soon, so for now please use the "add url to devDependencies" workaround.

I would appreciate if somebody could dive into why this happens and tried to reproduce it with your npm version.

[NessDan]

@brakowski thank you, the url dependency fixed it.

I was having the same issue on Ubuntu 15.10, node v6.3.1, npm v3.10.8

[maxoux]

I have same issue, but the url dependency did not solve the issue...
npm: 3.8.6
node: 6.1.0
OS : Linux debian 3.16.0-4-amd64 #1 SMP Debian 3.16.36-1+deb8u1 (2016-09-03) x86_64 GNU/Linux

npm ls url

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

npm ls querystring

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

npm ls buffer

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

i have this issue with this computer, and a computer's coworker on ubuntu.
But my laptop work fine, on same version of debian.

[sirreal]

I experienced this issue and mistakenly attributed it to a module I was using. My project was not ejected. See: https://github.com/mozilla-services/react-jsonschema-form/issues/321

My workaround was to build my app inside a disposable container.

[gaearon]

I wonder if it's the same problem as https://github.com/facebookincubator/create-react-app/issues/1023.

[ghost]

I am experiencing this same error message after installing a different module, auth0-lock (https://github.com/auth0/lock). I have not ejected my project, but I found others were experiencing the same error message, such as @sirreal , and as mentioned at https://github.com/facebookincubator/create-react-app/issues/587. I saw that this issue is still open, while those other ones are closed, so I've decided to post about my experience here.

npm: 3.10.8
node: 6.9.1
os: Ubuntu 16.04 LTS

I ran npm cache clean and npm i -g npm. I also added url as a dependency, blew away my node_modules dir and re-ran npm install, but none of those fixed the problem, although my error stack trace is shorter:

Uncaught Error: process.binding is not supported
    at Object.process.binding (webpack:///./~/react-scripts/~/process/browser.js?:173:11)
    at Object.eval (webpack:////usr/lib/nodejs/util.js?:3:20)
    at eval (webpack:////usr/lib/nodejs/util.js?:942:30)
    at Object.<anonymous> (http://localhost:3000/static/js/bundle.js:3784:2)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:556:30)
    at fn (http://localhost:3000/static/js/bundle.js:87:20)
    at eval (webpack:///./~/auth0-lock/lib/i18n.js?:20:13)
    at Object.<anonymous> (http://localhost:3000/static/js/bundle.js:4342:2)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:556:30)
    at fn (http://localhost:3000/static/js/bundle.js:87:20)

Thought I'd post in case these are all related and it could help fix this issue! ¯_(ツ)_/¯

[ghost]

@gaearon Should I post my message above in https://github.com/facebookincubator/create-react-app/issues/1023? Or do y'all have a pretty good idea what's going on already? I scanned that issue, but it's a bit above my head ;P. Also, it may be worth noting that just requiring auth0-lock module breaks it. Finally, I'm in a room of 12 people and everyone else has a Mac and are not running into this issue.

[gaearon]

No, nobody has any idea why it happens.
We really need help there.

Yes, please cross-post because that thread is bigger.

So far it is only reproducible on Ubuntu, never on OS X.

[ghost]

@gaearon Done!
@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.

[gaearon]

Fixed in #1194.

[Dmitry1007]

I did not use create-react-app to build my project but this is the only relevant thread to my particular case. I'm using the Firebase Admin SDK and as soon as I import * as admin from 'firebase-admin' I get this same error on the client bundle.js:1048 Uncaught Error: process.binding is not supported

I've tried everything in this thread and it still won't go away, any insight would be appreciated!? I'm kinda desperate at this point :(

Could someone at least explain what exactly is process and what is the method binding that's being called on process? Since this is a webpack issue maybe I can require Firebase Admin SDK without the use of webpack? If so, how would I go about doing this?

[gaearon]

@Dmitry1007

Have you seen my summary in https://github.com/facebookincubator/create-react-app/pull/1194#issue-194086029? This likely means a Node.js module somehow ends up in your build instead of Webpack's shim.

[gaearon]

Or perhaps process.binding is part of the shim (most likely) but some module you're importing assumes it's running in Node.js and relies on features not implemented by Webpack's shim.

Are you confident https://www.npmjs.com/package/firebase-admin is supporting being run from browser environments?

[gaearon]

Fixed in 0.8.2.
Please verify.

https://github.com/facebookincubator/create-react-app/releases/tag/v0.8.2