CODEWITHSUNDEEP
javascriptreactjswebpackmqttuglifyjs
AmerllicA
AmerllicA

Reputation: 32602

Webpack UglifyJS fall in error for production build because of MQTT.js existance

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

Upvotes: 1

Views: 837

Answers (2)

Tarun Lalwani
Tarun Lalwani

Reputation: 146630

Your problem is quite simple. If you look at the mqtt.js which you are using, its content is

$ ls
bin  CONTRIBUTING.md  dist  doc  examples  lib  LICENSE.md  mqtt.js  node_modules  package.json  README.md  test  types
$ cat mqtt.js 
#!/usr/bin/env node
'use strict'

/*
 * Copyright (c) 2015-2015 MQTT.js contributors.
 * Copyright (c) 2011-2014 Adam Rudd.
 *
 * See LICENSE for more information
 */

var MqttClient = require('./lib/client')
var connect = require('./lib/connect')
var Store = require('./lib/store')

module.exports.connect = connect

// Expose MqttClient
module.exports.MqttClient = MqttClient
module.exports.Client = MqttClient
module.exports.Store = Store

function cli () {
  var commist = require('commist')()
  var helpMe = require('help-me')()

  commist.register('publish', require('./bin/pub'))
  commist.register('subscribe', require('./bin/sub'))
  commist.register('version', function () {
    console.log('MQTT.js version:', require('./package.json').version)
  })
  commist.register('help', helpMe.toStdout)

  if (commist.parse(process.argv.slice(2)) !== null) {
    console.log('No such command:', process.argv[2], '\n')
    helpMe.toStdout()
  }
}

if (require.main === module) {
  cli()
}

Now this is supposed to be a cli and not ingested directly. But if you see there is a dist folder, which includes another mqtt.js. This is what you should use. So changing

import {connect} from 'mqtt';

to

import {connect} from 'mqtt/dist/mqtt';

And building it again fixes the issue

[1] Hash: 23e55c27224c66d940890aee1c472502b9e9a7e0
Version: webpack 3.12.0
Child client:
    Hash: 23e55c27224c66d94089
    Time: 10477ms
         Asset       Size  Chunks                    Chunk Names
     client.js     311 kB       0  [emitted]  [big]  main
    styles.css  246 bytes       0  [emitted]         main
       [7] (webpack)/buildin/global.js 509 bytes {0} [built]
           [] -> factory:229ms building:43ms = 272ms
      [27] ./src/client.jsx 606 bytes {0} [built]
            factory:144ms building:145ms = 289ms
      [65] ./src/app/App.jsx 7.94 kB {0} [built]
           [] -> factory:6ms building:195ms dependencies:5ms = 206ms
      [74] ./src/styles/styles.pcss 151 bytes {0} [built]
           [] -> factory:2556ms building:2927ms = 5483ms
        + 75 hidden modules
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/postcss-loader/lib/index.js??ref--1-3!src/styles/styles.pcss:
           [0] ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./src/styles/styles.pcss 530 bytes {0} [built]
                factory:95ms building:838ms = 933ms
            + 1 hidden module
Child server:
    Hash: 0aee1c472502b9e9a7e0
    Time: 10465ms
         Asset     Size  Chunks             Chunk Names
     server.js   237 kB       0  [emitted]  main
    stats.json  0 bytes          [emitted]  
      [54] ./src/server.jsx 1.28 kB {0} [built]
            factory:17ms building:254ms = 271ms
      [98] ./src/app/template.jsx 622 bytes {0} [built]
           [] -> factory:17ms building:16ms = 33ms
      [99] ./src/app/App.jsx 7.94 kB {0} [built]
           [] -> factory:18ms building:120ms dependencies:79ms = 217ms
     [100] ./src/styles/styles.pcss 1.4 kB {0} [built]
           [] -> factory:2621ms building:4ms = 2625ms
     [101] ./node_modules/css-loader??ref--1-1!./node_modules/postcss-loader/lib??ref--1-2!./src/styles/styles.pcss 530 bytes {0} [built]
           [] -> factory:9ms building:918ms = 927ms
        + 132 hidden modules

Upvotes: 2

devmarkpro
devmarkpro

Reputation: 153

I had a similar problem, I don't know it works for you or not (I didn't test it in your repo) but I hope it can help you.

I guess fix node_module libraries as Externals instead of excluding them can solve your problem.

const nodeModules = {};
fs.readdirSync('node_modules').filter(function (x) {
    return ['.bin'].indexOf(x) === -1;
})
.forEach(function (mod) {
    nodeModules[mod] = 'commonjs ' + mod;
});

and at the end of your webpack's config set externals

// rest of your config
plugins: [
        new OptimizeCssAssetsPlugin({
            cssProcessorOptions: {discardComments: {removeAll: true}}
        }),
        new StatsPlugin('stats.json', {
            chunkModules: true,
            modules: true,
            chunks: true,
            exclude: [/node_modules[\\\/]react/],
        }),
    ]
externals: nodeModule

Read more about Externals

Upvotes: 0

Related Questions