React + Webpack5 app experiencing a 'buffer not defined' error

Question

I created a react app via npx create-react-app my-app and got several compile errors about module support.

I know webpack5 does not support some modules automatically, so I added them manually into the resolve.fallback in webpack.config.js.

While I don't get any more compile errors, I do get another error:

Buffer is not defined

on the browser.

I want to know how to fix it. InAngular, we can edit polyfills.ts like this:

global.Buffer = global.Buffer || require('buffer').Buffer;

But it is not working in React.

user_5561710 · Answer

I had a similar and I solved it by adding the following to your index.js you will fix the buffer issue:

import * as buffer from 'buffer';
window.Buffer = buffer.Buffer;

This link references was where I found the solution.