Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I created a React project by running npx create-react-app my-app

I installed mqtt-react-hooks

I added the App script

import { Connector } from 'mqtt-react-hooks';
import Status from './Status';
function App() {
    return (
        <Connector
          brokerUrl="mqtt://127.0.0.1:80/"
          parserMethod={(msg) => msg} // msg is Buffer
          <Status />
        </Connector>
export default App;
I get this error in the console
                Please do not post images of text, they are hard to read, impossible to search and for people that use screen readers. Copy and Paste the actual text and then use the toolbar to format it.
– hardillb
                Dec 20, 2021 at 10:40
As mentioned in answers here please also consider the following:
npm install --save buffer
import {Buffer} from 'buffer';
It won't help in case of external library dependency but might save you from reverting other libraries in case of using Buffer in code directly.
I had this problem too.
Recently I create a new version of react app and when I used mqtt.js ( not mqtt-react-hooks ) this bad Error was shown!!!
I found out Webpack version 5 does not support Buffer and so on.
Webpack 5 removes Buffer (see this info), effectively breaking MQTT library since it has explicit usages of it in the code.
so I downgrade to Webpack 4 and it's work.
if you don't know how to do that, this link might be helpful.
How to downgrade version of Webpack?.
To me downgrading react-scripts to version 4.0.3 fixed the problem. It is not a proper fix but its something...
In my case I needed to do the following also:
In package.json use react-script 4.0.3
Remove package-lock.json
remove node_modules folder
run npm install
After all this everything seems to be working fine.
In Webpack version 5, Webpack no longer automatically polyfill's Node.js API's if they are not natively supported anymore. The browser environment does not support Buffer natively, therefore we now need to add a third party Buffer package and point Node.js to it in the Webpack config. See how to polyfill buffer with webpack 5.
for me what worked was:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import inject from '@rollup/plugin-inject'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
    build: {
        rollupOptions: {
            plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
reply to this comment:
https://github.com/vitejs/vite/discussions/2785#discussioncomment-1452855
the only solution that worked for me was this:
npm add node-stdlib-browser
npm add -D vite-plugin-node-stdlib-browser
and then:
// vite.config.js
import { defineConfig } from 'vite'
import nodePolyfills from 'vite-plugin-node-stdlib-browser'
export default defineConfig({
  // other options
  plugins: [nodePolyfills()]
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.