Mqtt.js: Webpack build error, UglifyJs

[amerllica]

I have a react web app with server side rendering and I separate webpack configuration for development and production environment.

For each environment, I set two side configurations, first client and second server. these configs are so complete and work awesome, _but_

I need to have mqtt.js in this project, this library has #!/usr/bin/env node in first of its code sheet and using this library cause to running dev and build script fall in this error:

ERROR in ./node_modules/mqtt/mqtt.js
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| 'use strict'
| 
 @ ./src/app/App.jsx 23:12-27
 @ ./src/server.jsx

So I use shebang-loader to settle this issue and put in along side babel-loader in webpack configs and exclude the node_modules folder except mqtt folder, So this issue settled in development environment.

Then I run the build script and see this error:

ERROR in server.js from UglifyJs
Unexpected token: name (zlibLimiter) [server.js:1181,4]

I really need to use mqtt.js so I can not omit this or change it with any library like it.

If for analyzing need to see all configs or codes, This is the application Repository

[murbanowicz]

@amerllica have you found the solution?

[amerllica]

How do you do?

I have found the right answer with a bounty offering in the Stack Overflow, this link can help you @murbanowicz to solve this problem but if you don't want to read a lot of texts pay attention to below:

// the right importing of mqtt
import {connect} from 'mqtt/dist/mqtt';

But by using import {connect} from 'mqtt'; you imported source code of _mqqt_, we should import the final built.

I know, it is not a common way to importing in npm because they should put the final built in the root and put the source in bin or other folder. by the way it works with import {connect} from 'mqtt/dist/mqtt';

[wangjing013]

How do you do?

I have found the right answer with a bounty offering in the Stack Overflow, this link can help you @murbanowicz to solve this problem but if you don't want to read a lot of texts pay attention to below:

// the right importing of mqtt
import {connect} from 'mqtt/dist/mqtt';

But by using import {connect} from 'mqtt'; you imported source code of _mqqt_, we should import the final built.

I know, it is not a common way to importing in npm because they should put the final built in the root and put the source in bin or other folder. by the way it works with import {connect} from 'mqtt/dist/mqtt';

🚀🚀