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

Error while using with React.js #1441

Closed
RamtinPRG opened this issue Mar 9, 2022 · 17 comments
Closed

Error while using with React.js #1441

RamtinPRG opened this issue Mar 9, 2022 · 17 comments

Comments

@RamtinPRG
Copy link

Hello,
I have an issue that the library doesn't work with React, I get strange errors. It seems like it needs another package.

ERROR in ./node_modules/mqtt/lib/connect/index.js 7:12-26
Module not found: Error: Can't resolve 'url' in 'D:\Web\mqtt test\mqtt-web-client\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 }
resolve 'url' in 'D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\connect'
  Parsed request is a module
  using description file: D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\package.json (relative path: ./lib/connect)
    resolve as module
      D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\connect\node_modules doesn't exist or is not a directory
      D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\node_modules doesn't exist or is not a directory
      D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\node_modules doesn't exist or is not a directory
      D:\Web\mqtt test\mqtt-web-client\node_modules\node_modules doesn't exist or is not a directory
      looking for modules in D:\Web\mqtt test\mqtt-web-client\node_modules
        single file module
          using description file: D:\Web\mqtt test\mqtt-web-client\package.json (relative path: ./node_modules/url)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
            .web.mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.mjs doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.mjs doesn't exist
            .web.js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.json doesn't exist
            .web.jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.jsx doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.jsx doesn't exist
        D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
      D:\Web\mqtt test\node_modules doesn't exist or is not a directory
      D:\Web\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Web\mqtt test\mqtt-web-client\node_modules
        single file module
          using description file: D:\Web\mqtt test\mqtt-web-client\package.json (relative path: ./node_modules/url)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
            .web.mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.mjs doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.mjs doesn't exist
            .web.js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.json doesn't exist
            .web.jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.jsx doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.jsx doesn't exist
        D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
 @ ./src/App.js 10:11-26
 @ ./src/index.js 7:0-24 10:33-36
@RamtinPRG
Copy link
Author

I think it needs url package. You can install it using:
npm install url
currently I don't have any errors with this one.
I hope this is helpful for you if you have the same problem

@RamtinPRG
Copy link
Author

Hello again :)
Another error

Uncaught ReferenceError: Buffer is not defined
    at Object../node_modules/mqtt-packet/constants.js (constants.js:46:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Object../node_modules/mqtt-packet/parser.js (parser.js:4:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Object../node_modules/mqtt-packet/mqtt.js (mqtt.js:1:1)
    at Object.options.factory (react refresh:6:1)

@CodeCook83
Copy link

Hi

I also get errors when I add the library to my project.

After creating the React app and some components, I followed the steps on the website.

npm install -g webpack                    // Install webpack globally
npm install mqtt                          // Install MQTT library
cd node_modules/mqtt
npm install .                             // Install dev deps at current dir
webpack mqtt.js --output-library mqtt     // Build

// now you can import the library with ES6 import, commonJS not tested

However, on the last step I got this error message: (I run the command inside the Mqtt folder)

assets by status 0 bytes [cached] 1 asset

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/

ERROR in main
Module not found: Error: Can't resolve 'mqtt.js' in '/Users/user123/dev/project123/node_modules/mqtt'
Did you mean './mqtt.js'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
resolve 'mqtt.js' in '/Users/user123/dev/project123/node_modules/mqtt'
  Parsed request is a module
  using description file: /Users/user123/dev/project123/node_modules/mqtt/package.json (relative path: .)
    resolve as module
      looking for modules in /Users/user123/dev/project123/node_modules/mqtt/node_modules
        single file module
          using description file: /Users/user123/dev/project123/node_modules/mqtt/package.json (relative path: ./node_modules/mqtt.js)
            no extension
              /Users/user123/dev/project123/node_modules/mqtt/node_modules/mqtt.js doesn't exist
            .js
              /Users/user123/dev/project123/node_modules/mqtt/node_modules/mqtt.js.js doesn't exist
            .json
              /Users/user123/dev/project123/node_modules/mqtt/node_modules/mqtt.js.json doesn't exist
            .wasm
              /Users/user123/dev/project123/node_modules/mqtt/node_modules/mqtt.js.wasm doesn't exist
        /Users/user123/dev/project123/node_modules/mqtt/node_modules/mqtt.js doesn't exist
      /Users/user123/dev/project123/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/user123/dev/project123/node_modules
        single file module
          using description file: /Users/user123/dev/project123/package.json (relative path: ./node_modules/mqtt.js)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/dev/project123/node_modules/mqtt.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/dev/project123/node_modules/mqtt.js.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/dev/project123/node_modules/mqtt.js.json doesn't exist
            .wasm
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/dev/project123/node_modules/mqtt.js.wasm doesn't exist
        /Users/user123/dev/project123/node_modules/mqtt.js doesn't exist
      /Users/user123/dev/node_modules doesn't exist or is not a directory
      looking for modules in /Users/user123/node_modules
        single file module
          using description file: /Users/user123/package.json (relative path: ./node_modules/mqtt.js)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/node_modules/mqtt.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/node_modules/mqtt.js.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/node_modules/mqtt.js.json doesn't exist
            .wasm
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/node_modules/mqtt.js.wasm doesn't exist
        /Users/user123/node_modules/mqtt.js doesn't exist
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

webpack 5.70.0 compiled with 1 error and 1 warning in 81 ms

This file /Users/user123/dev/project123/node_modules/mqtt/node_modules/mqtt.js does not actually exists. There are only two folders that start with "mqtt", namely mqtt-connection and mqtt-packet

Do you have any idea what I am doing wrong?

OS: macOS 12.2.1
Node: 16.14.0
NPM: 8.3.1
React: 17.0.2

Cheers

@LarsFlieger
Copy link

Same issues here. Any fixes for it?

@CodeCook83
Copy link

I switched to paho-mqtt. Works fine for me out of the box

@msalafia
Copy link

@CodeCook83 It's probably a typo with the doc. You should try with webpack ./mqtt.js --output-library mqtt inside the folder "mqtt" in your node_modules.

But, just to let you know, i still got the error "Buffer is not defined".

@ashiqdey
Copy link

ashiqdey commented Apr 2, 2022

Hey lots of struggle since 5 6 hours trying to build the mqtt to use with react. so why do we need this command to run and build? All other package comes ready to use. Please make some work around. I am not able to use it with webpack 5. Else please tell us how to compile with older webpack or just share the bundled file.

npm install -g webpack                    // Install webpack globally
npm install mqtt                          // Install MQTT library
cd node_modules/mqtt
npm install .                             // Install dev deps at current dir
webpack mqtt.js --output-library mqtt     // Build

just frustrated with this error "Buffer is not defined" then "process is not defined"

@ashiqdey
Copy link

ashiqdey commented Apr 4, 2022 •
edited
Loading

Hello, I have an issue that the library doesn't work with React, I get strange errors. It seems like it needs another package.

ERROR in ./node_modules/mqtt/lib/connect/index.js 7:12-26
Module not found: Error: Can't resolve 'url' in 'D:\Web\mqtt test\mqtt-web-client\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 }
resolve 'url' in 'D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\connect'
  Parsed request is a module
  using description file: D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\package.json (relative path: ./lib/connect)
    resolve as module
      D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\connect\node_modules doesn't exist or is not a directory
      D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\node_modules doesn't exist or is not a directory
      D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\node_modules doesn't exist or is not a directory
      D:\Web\mqtt test\mqtt-web-client\node_modules\node_modules doesn't exist or is not a directory
      looking for modules in D:\Web\mqtt test\mqtt-web-client\node_modules
        single file module
          using description file: D:\Web\mqtt test\mqtt-web-client\package.json (relative path: ./node_modules/url)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
            .web.mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.mjs doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.mjs doesn't exist
            .web.js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.json doesn't exist
            .web.jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.jsx doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.jsx doesn't exist
        D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
      D:\Web\mqtt test\node_modules doesn't exist or is not a directory
      D:\Web\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Web\mqtt test\mqtt-web-client\node_modules
        single file module
          using description file: D:\Web\mqtt test\mqtt-web-client\package.json (relative path: ./node_modules/url)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
            .web.mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.mjs doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.mjs doesn't exist
            .web.js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.json doesn't exist
            .web.jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.jsx doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.jsx doesn't exist
        D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
 @ ./src/App.js 10:11-26
 @ ./src/index.js 7:0-24 10:33-36

Hey I have published a build version of mqtt@4.3.7 , so instead of using mqtt we can use precompiled-mqtt for react and other frontend libraries.

@vinters768
Copy link

to resolve Can't resolve 'url' issue: npm install url --save or yarn add url and in your webpack.config.js add:
resolve: { fallback: { url: require.resolve("url/"), }, }

but then we still get the buffer error:
Uncaught ReferenceError: Buffer is not defined at Object../node_modules/mqtt-packet/constants.js (constants.js:46:1) at Object.options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at fn (hot module replacement:61:1) at Object../node_modules/mqtt-packet/parser.js (parser.js:4:1) at Object.options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at fn (hot module replacement:61:1) at Object../node_modules/mqtt-packet/mqtt.js (mqtt.js:1:1) at Object.options.factory (react refresh:6:1)

@ashiqdey
Copy link

ashiqdey commented Apr 5, 2022

to resolve Can't resolve 'url' issue: npm install url --save or yarn add url and in your webpack.config.js add: resolve: { fallback: { url: require.resolve("url/"), }, }

but then we still get the buffer error: Uncaught ReferenceError: Buffer is not defined at Object../node_modules/mqtt-packet/constants.js (constants.js:46:1) at Object.options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at fn (hot module replacement:61:1) at Object../node_modules/mqtt-packet/parser.js (parser.js:4:1) at Object.options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at fn (hot module replacement:61:1) at Object../node_modules/mqtt-packet/mqtt.js (mqtt.js:1:1) at Object.options.factory (react refresh:6:1)

can you give this package a try. It is the exact same version of mqtt@4.3.7 which will solve all the issues we face in building with webpack

@SignDawn
Copy link

#1020

@ueberf
Copy link

ueberf commented Oct 6, 2022

to resolve Can't resolve 'url' issue: npm install url --save or yarn add url and in your webpack.config.js add: resolve: { fallback: { url: require.resolve("url/"), }, }
but then we still get the buffer error: Uncaught ReferenceError: Buffer is not defined at Object../node_modules/mqtt-packet/constants.js (constants.js:46:1) at Object.options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at fn (hot module replacement:61:1) at Object../node_modules/mqtt-packet/parser.js (parser.js:4:1) at Object.options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at fn (hot module replacement:61:1) at Object../node_modules/mqtt-packet/mqtt.js (mqtt.js:1:1) at Object.options.factory (react refresh:6:1)

can you give this package a try. It is the exact same version of mqtt@4.3.7 which will solve all the issues we face in building with webpack

Had the same issue, and using this package worked for me - thanks!

@jeffsf
Copy link

jeffsf commented Nov 17, 2022

This is still a problem, even after either installing url and buffer, as well as adding the webpack config as described at https://viglucci.io/how-to-polyfill-buffer-with-webpack-5 as ./webpack.config.js and selecting that in the IDE as the webpack configuration file.

Trying to move off Paho as it does not yet support MQTT 5.0

Environment:

  • macOS 12.6
  • pyCharm 2022.2.3

react@18.2.0
webpack@5.75.0

$ npm list -g
/usr/local/lib
└── npm@8.19.2

$ npm list
react-2022-11@0.1.0 /Volumes/miniup-users/jeff/devel/react-2022-11
├── @testing-library/jest-dom@5.16.5
├── @testing-library/react@13.4.0
├── @testing-library/user-event@13.5.0
├── axios@1.1.3
├── buffer@6.0.3
├── d3@7.6.1
├── jquery@3.6.1
├── mqtt@4.3.7
├── paho-mqtt@1.1.0
├── react-dom@18.2.0
├── react-scripts@5.0.1
├── react@18.2.0
├── url@0.11.0
└── web-vitals@2.1.4

@ashiqdey
Copy link

can you give this package a try. It is the exact same version of mqtt@4.3.7 which will solve all the issues we face in building with webpack

can you give this package a try. It is the exact same version of mqtt@4.3.7 which will solve all the issues we face in building with webpack

@fabioimpe fabioimpe mentioned this issue Jan 17, 2023
Closed
@robertsLando
Copy link
Member

Could be fixed by #1571

@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

@robertsLando
Copy link
Member

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

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
10 participants
@jeffsf @msalafia @robertsLando @vinters768 @CodeCook83 @ueberf @ashiqdey @LarsFlieger @SignDawn @RamtinPRG