Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

When importing MQTT to a Vue3 project, I get the following error: #1596

Closed
YIALU opened this issue Apr 10, 2023 · 10 comments
Closed

When importing MQTT to a Vue3 project, I get the following error: #1596

YIALU opened this issue Apr 10, 2023 · 10 comments

Comments

@YIALU
Copy link

YIALU commented Apr 10, 2023 •
edited
Loading 

constants.js:46  Uncaught (in promise) ReferenceError: Buffer is not defined
    at eval (constants.js:46:34)
    at ./node_modules/mqtt-packet/constants.js (src_views_Monitoring_vue.js:352:1)
    at __webpack_require__ (app.js:397:33)
    at fn (app.js:664:21)
    at eval (parser.js:4:1)
    at ./node_modules/mqtt-packet/parser.js (src_views_Monitoring_vue.js:402:1)
    at __webpack_require__ (app.js:397:33)
    at fn (app.js:664:21)
    at eval (mqtt.js:1:1)
    at ./node_modules/mqtt-packet/mqtt.js (src_views_Monitoring_vue.js:372:1)
eval @ constants.js:46
./node_modules/mqtt-packet/constants.js @ src_views_Monitoring_vue.js:352
__webpack_require__ @ app.js:397
fn @ app.js:664
eval @ parser.js:4
./node_modules/mqtt-packet/parser.js @ src_views_Monitoring_vue.js:402
__webpack_require__ @ app.js:397
fn @ app.js:664
eval @ mqtt.js:1
./node_modules/mqtt-packet/mqtt.js @ src_views_Monitoring_vue.js:372
__webpack_require__ @ app.js:397
fn @ app.js:664
eval @ client.js:10
./node_modules/mqtt/lib/client.js @ src_views_Monitoring_vue.js:423
__webpack_require__ @ app.js:397
fn @ app.js:664
eval @ index.js:3
./node_modules/mqtt/lib/connect/index.js @ src_views_Monitoring_vue.js:445
__webpack_require__ @ app.js:397
fn @ app.js:664
eval @ index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/PatientMonitoring.vue?vue&type=script&lang=js:4
./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/PatientMonitoring.vue?vue&type=script&lang=js @ src_views_Monitoring_vue.js:952
__webpack_require__ @ app.js:397
fn @ app.js:664
eval @ PatientMonitoring.vue?vue&type=script&lang=js:5
./src/components/PatientMonitoring.vue?vue&type=script&lang=js @ src_views_Monitoring_vue.js:1201
__webpack_require__ @ app.js:397
fn @ app.js:664
eval @ PatientMonitoring.vue:3
./src/components/PatientMonitoring.vue @ src_views_Monitoring_vue.js:1179
__webpack_require__ @ app.js:397
fn @ app.js:664
eval @ index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/Monitoring.vue?vue&type=script&lang=js:2
./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/Monitoring.vue?vue&type=script&lang=js @ src_views_Monitoring_vue.js:963
__webpack_require__ @ app.js:397
fn @ app.js:664
eval @ Monitoring.vue?vue&type=script&lang=js:5
./src/views/Monitoring.vue?vue&type=script&lang=js @ src_views_Monitoring_vue.js:1212
__webpack_require__ @ app.js:397
fn @ app.js:664
eval @ Monitoring.vue:3
./src/views/Monitoring.vue @ src_views_Monitoring_vue.js:1190
__webpack_require__ @ app.js:397
fn @ app.js:664
Promise.then(异步)
handleMenuItemClick @ menu.ts:142
handleClick @ menu-item.vue:88
onClick._cache.<computed>._cache.<computed> @ menu-item.vue:10
callWithErrorHandling @ runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182
invoker @ runtime-dom.esm-bundler.js:345

I tried to

npm install buffer

but it didn't work
thank you very much.
@ZGKtob
Copy link

ZGKtob commented Apr 11, 2023

import mqtt from 'mqtt/dist/mqtt'; 尝试这样

@YIALU
Copy link
Author

YIALU commented Apr 11, 2023

哇哦 立马就解决了 太厉害了哥 折腾了一晚上 非常感谢

@liusong1111 liusong1111 mentioned this issue May 9, 2023
Closed
@903328615
Copy link

import mqtt from 'mqtt/dist/mqtt';

强啊，我拷打了 gpt 一天，没给我解决

@wasdee
Copy link

wasdee commented May 26, 2023

#1412 (comment)

@robertsLando
Copy link
Member

MQTT 5.0.0 BETA is now available! Try it out and give us feedback: npm i mqtt@beta. It may fix your issues

@SpaceZL
Copy link

SpaceZL commented Jul 28, 2023

5.0.0还是用不了，用你们的方法都不行，降到4.3.7版本用你们的方法才行，搞死我了

@dvkam
Copy link

dvkam commented Jul 28, 2023

You must add a Polyfill for Buffer because Vite does not automatially polyfill nodejs builtins. @SpaceZL

What I usually do when I use Vite in a project is:

  1. Run npm install buffer

  2. Then create a new file nodeSpecific.ts in the src folder of the project and add:

import { Buffer } from 'buffer'

globalThis.Buffer = Buffer
  1. Then open the index.html file and add the following script in the body.
    It should look like this:
<body>
  <div id="root"></div>
   <script type="module" src="/src/nodeSpecific.ts"></script> //add this line
   <script type="module" src="/src/main.tsx"></script>
</body>
  1. Finally open the vite.config.ts file and add the resolve part:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    global: {},
  },
  plugins: [react()],
  resolve: {
    alias: {
      buffer: 'buffer',
    },
  },
})

Also if there are other solutions, I am curious to see them.

@robertsLando
Copy link
Member

I have fixed Browser docs by adding webpack and vite setup. Check them out

@wuhan169
Copy link

wuhan169 commented Aug 1, 2023

5.0.0还是用不了，用你们的方法都不行，降到4.3.7版本用你们的方法才行，搞死我了

我也是

@robertsLando
Copy link
Member

English please...

@vagreargnatry vagreargnatry mentioned this issue Aug 21, 2023
Closed
robertsLando pushed a commit that referenced this issue Aug 30, 2023
@vagreargnatry
fix: export js file in dist folder (#1596) (#1677)
cbe0dc6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@SpaceZL @wasdee @robertsLando @wuhan169 @903328615 @ZGKtob @YIALU @dvkam