React: Production build looks different from development build

Question

I have a React/Django app that's behaving differently when built for production that it does when run on the development server. The development version is how I want it to look.

There are a number of issues with the CSS. Text is a different font, and a some Bootstrap/Reactstrap features are ignored. See example screenshots below.

I think the issue has to do with the order in which css files are processed by the dev server, versus how Django serves the built app, by collecting the files in the /build dir created by the build script into the Django /staticfiles dir. I'm mystified how this would selectively apply classes to the same component, however. (See below - the offset of the jumbotron text is different, while the column size is the same)

Here's a screenshot of the home page in the production build, either served locally by Django or remotely on Heroku. (npm run build or npm run build-local - see package.json file below)

And here is how it looks on the local dev server: (npm run start)

In particular, the offset-md-5 class is ignored on the production build, while the rest of the classes aren't, col-md-5 for example applies in both versions.

Here's the relevant component:

const Photojumbo = () => {
    return(
        <Container className="jumbo-text ">
            <Jumbotron  className="" style={{ backgroundImage: "url(/static/photosquat-cropped.jpg)", backgroundSize: 'cover' }}>

                <Col className="header header-text col-md-5 offset-md-6" >
                    <h3>ytterblog</h3>
                    <p>A blog app and portfolio project by Gabriel Ytterberg</p>
                </Col>

            </Jumbotron>
        </Container>
    )
}

Here's the part of my package.json with the build scripts and dependencies. Note that I added the build-local script to emulate how it would look deployed to Heroku, since the deploy process takes so long. The build-local and Heroku build version are identical as far as I can tell.

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.0",
    "bootstrap": "^4.5.3",
    "bootstrap-social": "^5.1.1",
    "express": "^4.17.1",
    "font-awesome": "^4.7.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-fontawesome": "^1.7.1",
    "react-redux": "^7.2.2",
    "react-redux-form": "^1.16.14",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "react-transition-group": "^4.4.1",
    "reactstrap": "^8.7.1",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "PUBLIC_URL=http://localhost:3000/ react-scripts start",
    "build": "PUBLIC_URL=https://ytterblog.herokuapp.com/ react-scripts build",
    "build-local": "PUBLIC_URL=http://localhost:8000/ react-scripts build && python manage.py collectstatic --noinput",
    "postbuild": "python manage.py collectstatic --noinput",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Here's my App.css, which is the only css file I'm using:

  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.jumbotron {
  position:relative;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  margin: 0 auto;
  background:  none;
  color:floralwhite;
}

.navbar-dark {
  background-color: #142f87;
}

.header{
  background-color: #1a3db0;
  margin:0px auto;
  padding: 20px 0px 20px 0px;
}

.header-text{
  color: #dbdbdb;
  text-align: center;
}

.footer{
  background-color: #1a3db0;
  margin-top: 50px;
  padding: 20px 0px 20px 0px;
  position: relative;

}

.footer-text{
  color: #dbdbdb;
  text-align: center;
}

.avatar{
  height: 100;
  width: 100;
  margin: 20px;
}

.postcard{
  margin: 50px 0px 50px 0px;
}

dl {
  display: grid;
  grid-template-columns: max-content auto;
  column-gap: 20px;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

.card {
  padding-right: 0!important;
  padding-left: 0!important;
}

What am I missing?!?!

Answer 1

I had the same problem, here is what I had had discovered:

• many production build systems work in parallel
• so it can happen that the order of the bundled CSS could be different depending the environment
• weight of CSS selectors
  • in case the element has 2 css classes, it doesn't matter which one is used first, i. e. <... class="classA classB"> === <... class="classB classA">, what matters in this case is the order of definition of the classes, which can be swapped due to the parallel building process...

---

Solution:

Carefully inspect styles of the DOM elements that are inconsistent and note the difference in the order of cascading styles there. One of them overwrites the value u expected there - due to an earlier definition.

To find the difference more easily, I use the computed styles tab (in the Developer Web Tools), select "show all" and use some diff tool. When you find the overwritten value, simple !important will usually solve the problem.

Answer 2

It could be race condition. I had an issue where in production, the setState getting called twice, and somehow it run in parallel. The result rendered was half 1st state, and the other half was 2nd state.

I don't remember how did I solve it. Though, you try check if a setState is busy.

Answer 3

Use the developer tools on the browser to see if any bootstrap CDNs or other libraries are not loading properly if any of them are being blocked or ignored somehow it will probably be displayed on the console of the developer tools, that is what I would do.