如何使用 MQTT.js 和 ReactJS 解决 Webpack 错误答案

【问题标题】：How can I solve Webpack error using MQTT.js with ReactJS如何使用 MQTT.js 和 ReactJS 解决 Webpack 错误
【发布时间】：2022-01-12 10:54:36
【问题描述】：

我想通过单击 ReactJS 项目中的一个按钮来实现这一点，MQTTjs 处理程序向代理发送/发布消息。 MQTT 功能已经在没有 React 的情况下进行了测试。我正在使用 WebStorm (v2021.3) 在 macOS (v11.6.2) 上运行我的 React 项目。

为了解决这个问题，我按照 Github 和 NPM 上 MQTTjs 的说明进行操作。即：

npm install -g webpack
npm install mqtt
cd node_modules/mqtt
npm install .
webpack mqtt.js --output-library mqtt

虽然npm install . 不会引发错误，但webpack mqtt.js --output-library mqtt 会：

Module not found: Error: Can't resolve 'mqtt.js' in '/Users/Marco/JetBrains/WebStorm/WG/kitchen_control_view/node_modules/mqtt'
Did you mean './mqtt.js'?

所以我再次尝试添加./:webpack ./mqtt.js --output-library mqtt。这次我没有收到任何错误，而是警告：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

我想'没有错误？！让我们试一试吧。

编辑：我可以用./node_modules/.bin/webpack ./mqtt.js --mode=development --output-library mqtt 摆脱警告

所以在我的一个 JSX 文件中，我按照 Github 或 NPM 中的说明导入 mqtt。

import mqtt from "mqtt"

function App() {
  return (
    <div>
      <p>Test</p>
    <div>
  )
}

我还没有使用 mqtt 包，只是导入了它。这在控制台中引发了一个错误：以及网络浏览器中的此错误：

Compiled with problems:

ERROR in ./node_modules/mqtt/lib/connect/index.js 7:12-26

Module not found: Error: Can't resolve 'url' in '/Users/Marco/JetBrains/WebStorm/WG/kitchen_control_view/node_modules/mqtt/lib/connect'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
    - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "url": false }

这里是 mqtt 的版本和来自 package.json 的反应：

"mqtt": "^4.3.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",

然后我用npm install buffer 安装了缓冲区。但是随后 React 在浏览器中抛出了很多错误。我刚选了第一个。其他的都差不多，指向同一个路径/Users/Marco/JetBrains/WebStorm/WG/kitchen_control_view/node_modules/mqtt/node_modules/[PACKAGE_NAME]

Compiled with problems:

ERROR in ./node_modules/mqtt/node_modules/debug/src/browser.js

Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/Users/Marco/JetBrains/WebStorm/WG/kitchen_control_view/node_modules/mqtt/node_modules/debug/src/browser.js'

控制台错误改为：

感谢您的帮助，如果我忘记了一些重要信息，请告诉我。

最好，马可

【问题讨论】：

标签： reactjs webpack mqtt.js

【解决方案1】：

我也遇到了同样的问题，经过大量研究后，我得以解决。所以我决定发布 mqtt@4.3.7 here 的构建版本。所以不是

import mqtt from "mqtt";

导入预编译的mqtt包

import mqtt from "precompiled-mqtt";

一切都会和官方的mqtt.js一样

【讨论】：