I am installing a UI framework to a React app and this framework has its own set of dependencies. After updating my package.json, I notice that the framework's use of require() is not working.
For example, if we have the following in the React JSX:
"url(" + require("assets/img/ill/p2.svg") + ")"
it will render out as
url([object Module])
If the package.json from the framework is used, require() appears to work:
"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"
},
however, if we add them to my existing package.json, this problem starts to occur.
"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"
},
Specifically, this problem occurs when changing
"react-scripts": "3.4.1",
to
"react-scripts": "4.0.3",
How can we fix this problem so that it works with react-scripts 4? Thanks!
requirecode is in another library. Could it be that there is a new version of UI framework has this fixed for new react-scripts version?