I'm trying to load an image in one of my components and for this, I created one sample app using the following command:
ionic start yp-patient-app sidemenu --type=react --capacitor
After completion, I moved to one of the component and tried to use a pre-existing image via:
.container {
background-image: url("./assets/shapes.svg");
}
But it failed with an error and I'm not being able to use that file, I tried all the other combinations related to relative path like ../assets or shapes.svg, /assets/shapes
:
[react-scripts] Error: Can't resolve './assets/shapes.svg' in 'C:\Users\Ashish Bairwa\Desktop\temp\yp-patient-app\src\pages'
Here is my package.json preview:
{
"name": "yp-patient-app",
"version": "0.0.1",
"private": true,
"dependencies": {
"@capacitor/app": "1.0.7",
"@capacitor/core": "3.3.3",
"@capacitor/haptics": "1.1.3",
"@capacitor/keyboard": "1.2.0",
"@capacitor/status-bar": "1.0.6",
"@ionic/react": "^6.0.0",
"@ionic/react-router": "^6.0.0",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.6.3",
"@types/jest": "^26.0.20",
"@types/node": "^12.19.15",
"@types/react": "^16.14.3",
"@types/react-dom": "^16.9.10",
"@types/react-router": "^5.1.11",
"@types/react-router-dom": "^5.1.7",
"ionicons": "^5.4.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"typescript": "^4.1.3",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4",
"workbox-cacheable-response": "^5.1.4",
"workbox-core": "^5.1.4",
"workbox-expiration": "^5.1.4",
"workbox-google-analytics": "^5.1.4",
"workbox-navigation-preload": "^5.1.4",
"workbox-precaching": "^5.1.4",
"workbox-range-requests": "^5.1.4",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4",
"workbox-streams": "^5.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@capacitor/cli": "3.3.3"
},
"description": "An Ionic project"
}
This problem seems to be related to a react-scripts version that comes with ionic. The latest version no longer looks into the public folder for assets. Instead, it expects you to make a folder outside the public. If you want to pick assets from the public then revert react scripts to 3.4.1