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

Asked 27/1, 2021 at 15:57 Answered 12/1, 2023 at 6:34

Solved reactjs jestjs enzyme react-testing-library react-scripts

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"
  }
}

Darlenedarline answered 27/1, 2021 at 15:57 Comment(3)

I think I had the same issue. I fixed it by adding Buffer in Webpack plugins (more info here : #66157256) – Northwards 11/2, 2021 at 15:36

Ah, well that could help also. But it wasn't acceptable to edit webpack since i am using CRA. But anyway resolving it in my way makes this bug so ridiculous really – Darlenedarline 11/2, 2021 at 15:49

Does this answer your question? How to Polyfill node core modules in webpack 5 – Condensable 4/4, 2023 at 13:6

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');
});

Darlenedarline answered 27/1, 2021 at 15:57 Comment(0)

You need to install the buffer package

npm install buffer

Chewning answered 28/3, 2022 at 9:24 Comment(1)

I tried that, but no luck. – Darlenedarline 28/3, 2022 at 15:18

You have to Install this

npm install assert browserify-zlib buffer process stream-browserify util .

it will help you out

Resale answered 19/12, 2021 at 9:50 Comment(0)

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');
});

Darlenedarline answered 27/1, 2021 at 15:57 Comment(0)

-2

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

Weeper answered 12/1, 2023 at 6:34 Comment(1)

A code-only answer is not high quality. While this code may be useful, you can improve it by saying why it works, how it works, when it should be used, and what its limitations are. Please edit your answer to include explanation and link to relevant documentation. – Darrelldarrelle 12/1, 2023 at 15:24

Recommended topics

Hot tags