React build - not found: Error: Can't resolve 'buffer' - reactjs

Question

I am having an error when I build my application in react. I noticed this error only when I tried to build application.
When I stopped dev server and ran it again, it showed the same error. It seems that I made some change that only showed when I started the server again or make build:
Module not found: Error: Can't resolve 'buffer' in '\node_modules\htmlparser2\lib' 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 these module and configure a
polyfill for it.
If you want to include a polyfill, you need to install 'buffer'. If
you don't want to include a polyfill, you can use an empty module like
this:
resolve.alias: { "buffer": false }
error Command failed with exit code 1.
My application is made in CRA and Typescript. This is my package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "cross-env NODE_OPTIONS='--max-old-space-size=4096' react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"#apollo/react-hooks": "^4.0.0",
"#date-io/moment": "^1.3.13",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#material-ui/pickers": "^3.2.10",
"#optimizely/react-sdk": "^2.4.0",
"apollo-boost": "^0.4.9",
"classnames": "^2.2.6",
"formik": "^2.2.5",
"graphql": "^15.4.0",
"lodash": "^4.17.20",
"moment": "^2.29.1",
"react": "^16.13.1",
"react-app-polyfill": "^2.0.0",
"react-dom": "^16.13.1",
"react-google-recaptcha": "^2.1.0",
"react-masonry-css": "^1.0.14",
"react-router-dom": "^5.2.0",
"react-test-renderer": "^16.13.1",
"react-toastify": "^6.1.0",
"reset-css": "^5.0.1",
"use-debounce": "^5.1.0"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.1",
"#testing-library/user-event": "^12.2.2",
"#types/classnames": "^2.2.11",
"#types/enzyme": "^3.10.8",
"#types/enzyme-adapter-react-16": "^1.0.6",
"#types/jest": "^26.0.15",
"#types/lodash": "^4.14.165",
"#types/moment": "^2.13.0",
"#types/node": "^14.14.9",
"#types/react": "^16.9.56",
"#types/react-dom": "^16.9.9",
"#types/react-google-recaptcha": "^2.1.0",
"#types/react-router-dom": "^5.1.6",
"cross-env": "^7.0.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"enzyme-to-json": "^3.6.1",
"husky": "^4.3.0",
"jest-dom": "^4.0.0",
"jest-sonar-reporter": "^2.0.0",
"lint-staged": "^10.5.1",
"node-sass": "^5.0.0",
"prettier": "^2.2.0",
"ts-jest": "^26.4.4",
"typescript": "^4.1.2"
}
}

Answer 1

You need to install the buffer package
npm install buffer

Answer 2

You have to Install this
npm install assert browserify-zlib buffer process stream-browserify util .
it will help you out

Answer 3

I found a solution to my problem. It is a bit weird that it didn't show up as test error.
SOLUTION
To solve this I just replaced location of TEST_ID to be in my component, and that my-component.test file to import it from there:
My component
import React, { FunctionComponent } from 'react';
/* Tests */
export const TEST_ID = 'my-component-test-id';
export const MyComponent: FunctionComponent = () => {
return <div data-test-id={TEST_ID}>123</div>;
};
Test
import React from 'react';
import { cleanup } from '#testing-library/react';
import { mount } from 'enzyme';
import { TEST_ID } from './my-component';
import MyComponent from './my-component'
afterEach(cleanup);
it('Render My component and have some value', () => {
const wrapper = mount(<MyComponent />);
const myComponent = wrapper.find(`[data-testid='${TEST_ID}']`);
expect(myComponent).toHaveValue('some value');
});
Analysis
Apparently if you import some value (in my case a constant) from .test file, if you try and build your app, the mentioned error will show up.
In my case I had a component:
MyComponent
import React, { FunctionComponent } from 'react';
/* Tests */
import { TEST_ID } from './test/my-component.test';
export const MyComponent: FunctionComponent = () => {
return <div data-test-id={TEST_ID}>some value</div>;
};
The TEST_ID was imported from my-component.test file. The purpose of that constant was to have that test id set for component so I can find that element based of that test id in my test.
Test
import React from 'react';
import { cleanup } from '#testing-library/react';
import { mount } from 'enzyme';
import MyComponent from './my-component'
afterEach(cleanup);
export const TEST_ID = 'my-component-test-id';
it('Render My component and have some value', () => {
const wrapper = mount(<MyComponent />);
const myComponent = wrapper.find(`[data-testid='${TEST_ID}']`);
expect(myComponent).toHaveValue('some value');
});

Answer 4

you need to install 'buffer' : npm install buffer oR npm install buffer --f