我正在为react应用程序安装一个ui框架，该框架有自己的一组依赖项。更新我的 package.json ，我注意到框架的 require() 它不起作用。
例如，如果我们在react jsx中有以下内容：

"url(" + require("assets/img/ill/p2.svg") + ")"

它将呈现为

url([object Module])

如果 package.json 从使用的框架来看， require() 似乎有效：

"dependencies": {
    "@fortawesome/fontawesome-free": "5.14.0",
    "@glidejs/glide": "3.4.1",
    "@testing-library/jest-dom": "4.2.4",
    "@testing-library/react": "9.3.2",
    "@testing-library/user-event": "7.1.2",
    "choices.js": "9.0.1",
    "gulp": "4.0.2",
    "gulp-append-prepend": "1.0.8",
    "headroom.js": "0.11.0",
    "moment": "2.27.0",
    "node-sass": "4.14.1",
    "nouislider": "14.6.0",
    "prop-types": "15.7.2",
    "react": "16.13.1",
    "react-datetime": "2.16.3",
    "react-dom": "16.13.1",
    "react-github-button": "0.1.11",
    "react-google-maps": "9.4.5",
    "react-router-dom": "5.2.0",
    "react-scripts": "3.4.1",
    "reactstrap": "8.5.1"
  },

但是，如果我们将它们添加到我现有的 package.json ，这个问题开始出现。

"dependencies": {
    "@reduxjs/toolkit": "^1.5.1",
    "@testing-library/jest-dom": "4.2.4",
    "@testing-library/react": "9.3.2",
    "@testing-library/user-event": "7.1.2",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.2",
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.3",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "recharts": "^2.0.9",
    "@fortawesome/fontawesome-free": "5.14.0",
    "@glidejs/glide": "3.4.1",
    "choices.js": "9.0.1",
    "gulp": "4.0.2",
    "gulp-append-prepend": "1.0.8",
    "headroom.js": "0.11.0",
    "node-sass": "4.14.1",
    "nouislider": "14.6.0",
    "prop-types": "15.7.2",
    "react-datetime": "2.16.3",
    "react-github-button": "0.1.11",
    "react-google-maps": "9.4.5",
    "reactstrap": "8.5.1"
  },

具体来说，在更改时会出现此问题

"react-scripts": "3.4.1",

到

"react-scripts": "4.0.3",

我们如何解决此问题，使其与 react-scripts 4.谢谢