reactjs React生成-未找到：错误：无法解析“buffer”

ugmeyewa 于 2023-01-12 发布在 React

关注(0)|答案(4)|浏览(139)

我在react中构建应用程序时遇到了一个错误。我只是在尝试构建应用程序时才注意到这个错误。
当我停止开发服务器并再次运行它时，它显示了同样的错误。似乎我做了一些更改，这些更改只在我再次启动服务器或进行构建时才显示：
未找到模块：错误：无法解析"\node_modules\htmlparser2\lib"中的"buffer"中断更改：webpack〈5曾经默认包含node.js核心模块的polyfill。现在不再是这种情况了。请验证您是否需要这些模块并为其配置polyfill。
如果你想包含一个polyfill，你需要安装'buffer'。如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.alias:{"缓冲液"：假}
error命令失败，退出代码为1。
我的申请是用CRA和打字本做的。这是我的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"
  }
}

reactjs

来源：https://stackoverflow.com/questions/65922760/react-build-not-found-error-cant-resolve-buffer

4条答案

按热度按时间

62o28rlo1#

您需要安装缓冲包

npm install buffer

赞(0）回复(0）举报 2023-01-12

bnlyeluc2#

你必须安装这个
npm安装Assertbrowserify-zlib缓冲区进程流browserify实用程序。
它会帮你

赞(0）回复(0）举报 2023-01-12

yk9xbfzb3#

我找到了问题的解决方案。奇怪的是，它没有显示为测试错误。

- 解决方案**

为了解决这个问题，我只是将TEST_ID的位置替换为我的组件中，并将my-component.test文件从那里导入：

- 我的组件**

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

- 测试**

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

- 分析**

显然，如果您从.test文件导入一些值（在我的情况下是一个常量），如果您尝试构建您的应用程序，则会出现上述错误。
在我的例子中，我有一个组件：

- 我的组件**

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

TEST_ID是从my-component.test文件中导入的。该常量的目的是为组件设置测试ID，以便我可以在测试中基于该测试ID找到该元素。

- 测试**

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

赞(0）回复(0）举报 2023-01-12

nzrxty8p4#

我用这个：npm安装缓冲区--f

赞(0）回复(0）举报 2023-01-12