Build script from create-react-app adds an external import into CSS

Question

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:

Does this external import actually cause the missing CSS?
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"
    ]
  }
}

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
– Wesley LeMahieu, Commented Feb 12, 2023 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
– Michael, Commented Feb 12, 2023 at 16:29

Michael · Accepted Answer · 2023-02-12 20:41:53Z

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.

answered Feb 12, 2023 at 20:41

Michael

7,8798 gold badges50 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wesley LeMahieu · Accepted Answer · 2023-02-12 16:34:01Z

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")

answered Feb 12, 2023 at 16:34

Wesley LeMahieu

2,6731 gold badge15 silver badges11 bronze badges

3 Comments

Michael Over a year ago

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.

Wesley LeMahieu Over a year ago

Interesting. Can you share your package.json file contents in the original post? I'd like to help.

Michael Over a year ago

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.

Collectives™ on Stack Overflow

Build script from create-react-app adds an external import into CSS

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related