I am facing an issue with my create-react-app. Everything works perfectly fine when I run it using npm run start.
However, after building it with npm run build, some CSS appears to be missing from the app. Upon investigation, I discovered that the file
build/static/css/main.38396655.css@import url("https://js.arcgis.com/4.25/@arcgis/core/assets/esri/themes/light/main.css")Strangely, the Network tab in Chrome's developer tools does not show any requests being made for this imported file. Even when I change the URL to a non-existent one, there are no 404 errors or indications.
This situation leads me to two questions:
- Could this external import be the reason behind the missing CSS?
- If so, how can I ensure that the build script includes this CSS in the final package?
For reference, here is the content of my package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@arcgis/core": "^4.25.5",
"@esri/calcite-components": "^1.0.5",
"@esri/calcite-components-react": "^0.35.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"proxy": "http://localhost:8080/",
"homepage": ".",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"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"
]
}
}