Suport for webpack 5.66.0

[Kroy665]

My error is:

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 }

package.json :

{
"name": "mqtt-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"mqtt-react-hooks": "^2.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

[BallThanapon]

Npm i url

[vitara-slipenchuk]

@Kroy665 did install url fix your issue?

[otaviojacobi]

Hello, I had the same issue and in order to make it work I had to do the following:

1. (only if you have created your app with create-react-app) You will have to manually update your webpack config, and have to eject from create react app default: npm run eject

2. now you will have to add the polifyll to the missing parts of your app npm i --save url buffer process

3. finally you can link this polyfill to your webpack fixing the issue with Buffer library (from MQTT.js Buffer is not defined mqttjs/MQTT.js#1294) by adding:

{   
    ...
    plugins: [
      ...
      new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'] }),
      ....
    ]
}

to your webpack.config.js.

[ccvca]

I've fixed this with a less intrusive way (without ejecting), by adding FixImport.ts (i'm using a typescript setup, for js, use the file suffix .js/.jsx) and import this as the first import in my App.tsx It feels like a dirty hack, but I still hope that this library will fix it one day and then I only need to remove the FixImport.ts.

npm i --save url buffer process

FixImport.ts:

import process from 'process'
import buffer from 'buffer'

(window as any).Buffer = buffer.Buffer;
(window as any).process = process;

export {};

App.tsx

import './FixImport'
[...]

[yoanncatalabt]

Thanks for the fix.
I tried @ccvca fix, which ends up resolving all compile errors, and my code runs.
However, I still can't get it working. I am using the basic example publishing to topic with a button.

The client state is null
The connectionStatus is stuck in "Connecting"
Moreover, in the network tab, 3 WS connections are initiated (101 Switching protocols) to my broker.

The broker is fully working, as I was previously using plain mqtt package without no issues. Tested also with public mqtt brokers, same results.

If someone has an idea ?
Thanks a lot !

[Aposhian]

I am having the same issue after resolving compilation issues with this workaround: https://alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5