The simple Solution
When you use ipfs-http-client in the frontend you will soon also have problems using jest. The easiest way is to simply not use ipfs-http-client at all and instead use a gateway like infura and fetch() the data directly. You can use my code for that:
https://gist.github.com/aignermax/c495c98003da974d17b9c4c481ac23be
The more tricky one
The problem seems to be related to webpack 5 that does not support any Node.js functions "polyfills" anymore. The idea is to keep the frontend separate from the backend and all ipfs-http-client functions are meant to be used in backend only.
You can however still add the polyfills manually following this tutorial: Remember that "Jest" will still not work after that, so if you do unit testing you should consider using ipfs on your server instead or use "The simple Solution" above.
https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736
I then got some webpack PolyErrors which I solved using this NPM Package:
https://www.npmjs.com/package/node-polyfill-webpack-plugin
I also Got Errors about failed to load Source-Map from source-map-loader, which will occur using WebPack5 which is included in the new React-Scripts. You fix that by using this:
Failed to parse source map
and NOW IT WORKS.