So I have a React.js project that suddenly doesn't load local images (such as: src={require("../../assets/images/logo/logo-v4.png")} on localhost. Remote images from an external URL are displaying. Looks like my live deployed build still loads the images properly, but I am worried to build and deploy my recent changes to corrupt my live build with whatever this issue is. I have tried to git checkout an older commit where I know the images were working properly, but that checkout is also not displaying local images.
I have tried deleting node_modules, package-lock.json, npm cache clean --force, then npm install again, and the problem still persists. I have reset my PC. I have run other React.js projects on my PC and local images load just fine, so it is just with this specific project.
Not sure how this happened, or what to try next to resolve this issue. Has this happened to anyone else? What else can I try to resolve this? Let me know if you want me to share more code. Thanks!
package.json:
{
"name": "project-name",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3000/",
"dependencies": {
"chart.js": "^2.9.4",
"eslint-plugin-flowtype": "^3.13.0",
"firebase": "^7.24.0",
"firebase-admin": "^9.3.0",
"firebase-functions": "^3.11.0",
"firebase-tools": "^8.14.1",
"formik": "^2.2.1",
"history": "^4.10.1",
"npm": "^7.0.7",
"react": "^16.14.0",
"react-animated-burgers": "^1.2.8",
"react-animated-slider": "^1.1.4",
"react-burger-menu": "^2.9.0",
"react-datez": "^1.4.1",
"react-dom": "^16.14.0",
"react-firebase-file-uploader": "^2.4.3",
"react-flexbox-grid": "^2.1.2",
"react-ga": "^2.5.7",
"react-icons": "^3.11.0",
"react-modal": "^3.11.2",
"react-pdf": "^5.0.0",
"react-quill": "^1.3.5",
"react-responsive": "^6.1.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.0",
"react-toastify": "^5.1.0",
"recharts": "^1.5.0",
"typescript": "^3.9.7",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
