0

I have an app created with create-react-app. The app works fine when served using npm run start.

Now, when built using npm run build, some CSS seems missing. I also observe that build/static/css/main.38396655.css contains an @import to a third-party server. Namely for Esri's Calcite Components: @import url("https://js.arcgis.com/4.25/@arcgis/core/assets/esri/themes/light/main.css").

Furthermore, the Network tab in Chrome's dev tools does not show any request for that imported file. I also get no 404 or anything if I replace it by a non-existing URL.

Two questions regarding this:

  1. Does this external import actually cause the missing CSS?
  2. If so, how can I force the build script to include this CSS in the built package?

As requested, here also the 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"
    ]
  }
}
Michael
  • 7,407
  • 8
  • 41
  • 84
  • In your browser if you `Inspect Element` then refresh the page, do you see any errors in the `console` or `network` tabs relating to your `.css` file? – Wesley LeMahieu Feb 12 '23 at 14:54
  • Unfortunately, there are no errors shown at all. The console does not report anything at all, and network has all responses with statuscode 200. – Michael Feb 12 '23 at 16:29

2 Answers2

1

I could finally solve the problem on my own:

The CSS file was never really loaded, because nginx served it with a wrong mime type. So finally it was a problem with nginx, not CSS, that I solved as explained here.

Unfortunately, the dev tools neither in Chrome nor Edge said anything about the mime type problem. It was finally the Mozilla dev tools that gave me a clue.

Michael
  • 7,407
  • 8
  • 41
  • 84
0

It appears you're missing the " quotation markers around the URL itself inside the import. Look at Importing CSS Rules.

Try using this:

@import url("https://js.arcgis.com/4.25/@arcgis/core/assets/esri/themes/light/main.css")

Wesley LeMahieu
  • 2,296
  • 1
  • 12
  • 8
  • Unfortunately, this doesn't help either. First of all, the `@import url(...)` appears in a file that is not manually edited, but the result of `npm run build` by `create-react-app`. Second, even when I add the quotation marks, the problem stays the same. – Michael Feb 12 '23 at 19:33
  • 1
    Interesting. Can you share your `package.json` file contents in the original post? I'd like to help. – Wesley LeMahieu Feb 12 '23 at 19:50
  • Did so. It's also to mention that the dev tools in Chrome don't show any request to the imported file. But it definitely exists. – Michael Feb 12 '23 at 20:13