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: webpack/webpack#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.

[github-actions]

This is an automated message to let you know that this issue has
gone 365 days without any activity. In order to ensure that we work
on issues that still matter, this issue will be closed in 14 days.

If this issue is still important, you can simply comment with a
"bump" to keep it open.

Thank you for your contribution.

[github-actions]

This issue was automatically closed due to inactivity.