Failed to import mqtt module after upgrading react-scripts to 0.4.1

[alwint3r]

I was using mqtt module with react-scripts v0.2.3 to build some sort of IoT web app. Everything was fine until I upgraded the react-scripts to v0.4.1. There was an error from the developer console:

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

Removing the import mqtt from 'mqtt' or require('mqtt') solve the issue, but that's not what I wanted. Any help would be appreciated. Thanks in advance!

[gaearon]

I can’t reproduce this on master.

I’m going to release 0.4.2 today.
If you still have issues with it, please provide a project reproducing it.

[alwint3r]

Ok then, I'll re-open this issue if I still have the same problem with 0.4.2. Thanks!

[alwint3r]

I still have the same issue with 0.4.2, here's the project repo: https://github.com/alwint3r/reweather. You can checkout to 0.4.2 branch on that repo to check the error, since the master branch uses 0.3.1 and everything works fine.

The file that causes the error is src/lib/mqttredux.js.

[fson]

I can't reproduce this on the 0.4.2 branch of that repo.

[gaearon]

I also can’t reproduce this on 0.6.0 branch of that repo.
If it doesn’t work, please delete node_modules and run npm install.
Maybe some dependency is stale for some reason.

Thanks!

[alwint3r]

I did remove the node_modules and reinstall the dependencies but nothing changed. I still see nothing on the screen but the same error on the browser console.

By the way, I am going to try another alternatives since mqtt module is not my only option.
Thank you for your effort on this awesome tool!

[aronwoost]

I had the same problems with npm@2. The problem disappears with npm@3.

[alwint3r]

@aronwoost I also have npm v3 installed. What version of node are you using?

I wonder if it's because I'm still using node v4.

[aronwoost]

node: v4.5.0
npm 3.10.6

[gaearon]

Try clearing npm cache before running npm install again.

rm -rf node_modules
rm -rf ~/.npm
npm cache clear
npm install

[alwint3r]

@aronwoost mine is exactly the same as yours.
@gaearon I did clear the cache but nothing changed.

[gaearon]

This is super weird.
Can you tell me more about this message:

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

Does it have a stack trace?

[alwint3r]

Uncaught Error: process.binding is not supported
process.binding @ browser.js:173
(anonymous function) @ util.js:3
(anonymous function) @ util.js:938
(anonymous function) @ bundle.js:6889
__webpack_require__ @ bundle.js:556
fn @ bundle.js:87
(anonymous function) @ stream.js:6
(anonymous function) @ bundle.js:7006
__webpack_require__ @ bundle.js:556
fn @ bundle.js:87
(anonymous function) @ readable.js:1
(anonymous function) @ readable.js:13
(anonymous function) @ bundle.js:8887
__webpack_require__ @ bundle.js:556f
n @ bundle.js:87
(anonymous function) @ store.js:2
(anonymous function) @ store.js:110
(anonymous function) @ bundle.js:8878
__webpack_require__ @ bundle.js:556
fn @ bundle.js:87
(anonymous function) @ client.js:7
(anonymous function) @ client.js:923
(anonymous function) @ bundle.js:8869
__webpack_require__ @ bundle.js:556
fn @ bundle.js:87
(anonymous function) @ index.js:2
(anonymous function) @ index.js:139
(anonymous function) @ bundle.js:8860
__webpack_require__ @ bundle.js:556
fn @ bundle.js:87
(anonymous function) @ mqttredux.js:13
(anonymous function) @ bundle.js:8851
__webpack_require__ @ bundle.js:556
fn @ bundle.js:87
(anonymous function) @ index.js:31
(anonymous function) @ bundle.js:1363
__webpack_require__ @ bundle.js:556
fn @ bundle.js:87
(anonymous function) @ multi_main:3
(anonymous function) @ bundle.js:589
__webpack_require__ @ bundle.js:556
(anonymous function) @ bundle.js:579
(anonymous function) @ bundle.js:582

Here's line 172 - 174 in browser.js

process.binding = function (name) {
    throw new Error('process.binding is not supported');
};

I don't know where browser.js comes from. And as far as I know, mqtt is not built with C/C++ code.

The stacktrace points to a file where I included mqtt module with import { connect } from 'mqtt' on the first line in src/lib/mqttredux.js

[aronwoost]

browser.js is here: https://github.com/defunctzombie/node-process

[aronwoost]

Also last comment here: webpack/webpack#798

But it all made no sense to me...

[themre]

I noticed the same problem with my colleague, that uses Ubuntu, node 6.6.0 and npm 3.10.7. On windows this app runs without any problems.
He tried to run app and got this exact error (process.binding), but he discovered that the problem lied with this package: superagent-xml2jsparser, which uses xml2js. Once he removed it, the app runs now.
Apparently it needs browserify.

[alwint3r]

Oh yes, I'm also using ubuntu 14.04 with node v4.5.0 and npm 3.10.6.

Thank you for the hint @themre! I'll get back to this issue ASAP.

[alwint3r]

Hi! Sorry for late response. I can not find both superagent-xml2jsparser and xml2js. However I managed to solve the problem by running my app inside docker container. I still have no idea why the app does not work on my host machine. But I think I am happy with my current solution, so I'm gonna close this issue now. Thank you!

[rosenk]

I'm having the same problem. Clean fresh create-react-app app and just import mqtt, I'm not even using it.
node - 6.9.1
npm - 3.10.8
create-react-app - 0.6.1
"mqtt": "^2.0.1",
XUbuntu 16.04

[gaearon]

This is the same issue as #1023 and #815.
It was fixed by #1194 and 0.8.2 contains this fix.

[alwint3r]

Great! I had no idea why this issue happens because there was no compile error. Thank you for your effort! You people are awesome!

[gaearon]

Yea, sorry it was confusing.
Confused the hell out of us too, it took a month to get to the cause.

[alwint3r]

I didn't realize that there was no NODE_PATH inside the docker container. Now I know why it worked back then.

I'm glad that this issue is finally closed.