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 https://github.com/mqttjs/MQTT.js/issues/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