title: React build is very different from development
body: <p>Thanks you want to try to help me!</p>
  <p>When I build my React web app it looks very different from the development mode. I use <code>serve -s build</code> to watch when the app is build. But also on my online Digitalocean server, it won't look the same as in development. So it probably has something to do with React or how it was build.
  This is in development mode:
  <a href="https://i.stack.imgur.com/kGpRh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kGpRh.png" alt="enter image description here" /></a></p>
  <p>This is when it is build:
  <a href="https://i.stack.imgur.com/BK9we.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BK9we.png" alt="enter image description here" /></a></p>
  <p>So it looks CSS or Javacript did not compile correctly.
  This is my package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;websitedominique&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@emotion/react&quot;: &quot;^11.7.1&quot;,
      &quot;@emotion/styled&quot;: &quot;^11.6.0&quot;,
      &quot;@material-ui/core&quot;: &quot;^4.12.3&quot;,
      &quot;@material-ui/icons&quot;: &quot;^4.11.2&quot;,
      &quot;@mui/icons-material&quot;: &quot;^5.2.1&quot;,
      &quot;@mui/material&quot;: &quot;^5.4.2&quot;,
      &quot;@mui/styled-engine-sc&quot;: &quot;^5.4.2&quot;,
      &quot;@react-hook/mouse-position&quot;: &quot;^4.1.3&quot;,
      &quot;@rehooks/window-size&quot;: &quot;^1.0.2&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.1.0&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.1.10&quot;,
      &quot;concurrently&quot;: &quot;^7.0.0&quot;,
      &quot;cors&quot;: &quot;^2.8.5&quot;,
      &quot;express&quot;: &quot;^4.17.3&quot;,
      &quot;framer-motion&quot;: &quot;^4.1.17&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-router&quot;: &quot;^6.0.2&quot;,
      &quot;react-router-dom&quot;: &quot;^6.0.2&quot;,
      &quot;react-scripts&quot;: &quot;4.0.3&quot;,
      &quot;styled-components&quot;: &quot;^5.3.3&quot;,
      &quot;swiper&quot;: &quot;^6.8.4&quot;,
      &quot;use-react-dimensions&quot;: &quot;^2.0.1&quot;,
      &quot;web-vitals&quot;: &quot;^1.0.1&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;nodemon&quot;: &quot;^2.0.15&quot;
    }
  }
  
  </code></pre>
  <p>I Hope someone can help me with this. Thanks for all help!</p>