Importing js-ipfs gives some webpack errors [Reactjs]

I can not import IPFS because some Webpack errors. I do not really know how to fix them but after searching some information I think that is something about Webpack 5.
I did the following steps:

npx create-react-app test-app
cd test-app
npm install ipfs

Then I imported IPFS inside App.js:

import Ipfs from 'ipfs';

And when I execute npm start I get the following errors:

Module build failed: UnhandledSchemeError: Reading from "node:fs" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

Module build failed: UnhandledSchemeError: Reading from "node:https" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.


Module build failed: UnhandledSchemeError: Reading from "node:http" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.


Module build failed: UnhandledSchemeError: Reading from "node:path" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.


Module build failed: UnhandledSchemeError: Reading from "node:stream" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

Module build failed: UnhandledSchemeError: Reading from "node:url" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

Module build failed: UnhandledSchemeError: Reading from "node:util" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

Module build failed: UnhandledSchemeError: Reading from "node:worker_threads" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

Module build failed: UnhandledSchemeError: Reading from "node:zlib" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

That’s because js-ipfs is not a browser package, but a Node JS package.
All those imports are Node imports and I’ve opened an issue on the utils repo for this (where it originates): `electron-fetch` dependency is not ESM compatible · Issue #164 · ipfs/js-ipfs-utils · GitHub

I also notice you use ipfs instead of js-ipfs, which you should be using btw.

I’m having a similar issue. is there a fix?