Mqtt.js: use babel-loader in webpack

[aibeb]

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'

[mcollina]

I acutally don't know what this is. I've used webpack to bundle this several times.

[simonnilsson]

The error is because the main file defined in package.json mqtt.js contains a shebang line #!/usr/bin/env node. This is not supported by webpack as it is not valid javascript. The CLI-parts should be separated in to its own file so that it is not included when you import it as a library.

Reference: https://github.com/webpack/webpack/issues/4603

The way around it atm is to use a loader in webpack that ignores the shebang line like https://github.com/javascriptismagic/shebang-loader

[clementAC]

Same problem here and the shebang loader doesn't seem to work on my side.

[grnch]

If the shebang-loader doesn't work for whatever reason or is too complex to set up, you can try using the built-in NormalModuleReplacementPlugin from Webpack.

Just add the following to your webpack.config.js file:

var webpack = require("webpack");

module.exports = {
    // ... other webpack config ...
    plugins: [
        new webpack.NormalModuleReplacementPlugin(/^mqtt$/, "mqtt/dist/mqtt.js"),
    ],
};

This essentially tells Webpack whenever it sees require("mtqq") to replace it with require("mqtt/dist/mqtt.js") which is the minified version of the MQTT library that doesn't happen to have the #! line at the beginning.

[grnch]

@mcollina Would it be possible to put the CLI and the MQTT library in separate files somehow? Putting them in a single file like this is obviously causing problems because the #! line at the top is not a valid JS syntax, and it interferes with all kinds of JS parsers (Webpack, Babel, Uglify, etc).

[mcollina]

Definitely, but why https://github.com/mqttjs/MQTT.js/blob/master/package.json#L60 is not recognized anymore?
Would you like to send a PR?

[grnch]

@mcollina I am not sure why the "browser" field in your package.json is not respected. If I had to guess, the problem is most likely with older bundlers/loaders from before the browser field spec was created.

I just checked that Webpack 4 loads and packages your library just fine, but earlier versions of Webpack throw an error, which would seem to confirm the theory above.

I guess with time this problem will go away, as more and more people upgrade to latest Webpack/Babel/etc. But for the time being many projects are stuck with older versions of Webpack that have this issue.

[pan-kot]

Works for me:

{
  test: /\.js$/,
  include: /node_modules\/rc\/index.js/,
  loader: 'shebang-loader',
}

[yueyuzhao]

If the shebang-loader doesn't work for whatever reason or is too complex to set up, you can try using the built-in NormalModuleReplacementPlugin from Webpack.

Just add the following to your webpack.config.js file:

var webpack = require("webpack");

module.exports = {
    // ... other webpack config ...
    plugins: [
        new webpack.NormalModuleReplacementPlugin(/^mqtt$/, "mqtt/dist/mqtt.js"),
    ],
};

This essentially tells Webpack whenever it sees require("mtqq") to replace it with require("mqtt/dist/mqtt.js") which is the minified version of the MQTT library that doesn't happen to have the #! line at the beginning.

I'm integrating mqtt to my electron app, and this works for me.

[murbanowicz]

I am trying the solution sypplied by @grnch . It compiles but then it runes into the issue caused by the fact that ws is not being included there.