title: Chunk loading error in production React for MacOS and IOS users
body: <p>I've got a problem for few weeks and I'm not even sure of his reason.<br/><br/>
  After building with the create-react-app template and deploying the app in production for an unknown reason a CSS chunk isn't called on all MacOS, IOS navigators (there aren't any errors on the console) but on Windows and Android the chunk is called by the navigators. <br/><br/>
  However, with the versions deployed in test and dev, it works fine for every user.
  I've tried many things to debug this:</p>
  <ul>
  <li><p>Remove the LazyLoading of this component.</p>
  </li>
  <li><p>Include the chunk in the head of index.html.</p>
  </li>
  <li><p>Suppress the CSS file and paste his content into another CSS file to reduce the number of chunks.</p>
  </li>
  <li><p>Change the instance type where it's deployed to have the same environment as dev and test.
  <br/><br/>Here's some screenshots of the difference:<br/>
  <a href="https://i.stack.imgur.com/sXB5K.png" rel="nofollow noreferrer">The chunk called on Windows and Android</a>
  <br/>
  <a href="https://i.stack.imgur.com/g9RE2.png" rel="nofollow noreferrer">The render on Windows and Android</a>
  <br/>
  <a href="https://i.stack.imgur.com/6RlvE.png" rel="nofollow noreferrer">The render on MacOS and IOS</a>
  <br/><br/>
  Here the code of the component:</p>
  </li>
  </ul>
  <pre><code>
      import React, { useState } from 'react';
      import { Button, Modal, Form } from 'react-bootstrap';
      import '../../../../styles/reusable/popIn/AddFreeModal/addFreeModal.scss';
      import validator from 'validator';
      import { sendInviteEmail } from '../../../../reducers/mail';
      import { useDispatch } from 'react-redux';
      import { useToasts } from 'react-toast-notifications';
      
      export default function AddFreeModal(props) {
        const { handleClose, show } = props;
        const { addToast } = useToasts();
        const [email, setEmail] = useState('');
        const [first_name, setFirst] = useState('');
        const [last_name, setLast] = useState('');
        const [emailErr, setEmailErr] = useState('');
        const [first_nameErr, setFirstErr] = useState('');
        const [last_nameErr, setLastErr] = useState('');
        const dispatch = useDispatch();
      
        const verifMail = (email) =&gt; validator.isEmail(email);
        const verifFirst = (first_name) =&gt; first_name.length &gt; 2;
        const verifLast = (last_name) =&gt; last_name.length &gt; 2;
        const emailNotExist = () =&gt; addToast(`Echec de l'invitation, adresse mail erronée: ${email}`, {
          appearance: 'error',
          autoDismiss: true,
        });
        const emailAlreadySend = () =&gt; addToast('Invitation déja envoyée cette semaine réessayez plus tard !', {
          appearance: 'error',
          autoDismiss: true,
        });
        const mailSend = () =&gt; handleClose('true');
      
        const handleForm = async () =&gt; {
          setEmailErr('');
          setFirstErr('');
          setLastErr('');
          if (verifMail(email) &amp;&amp; verifFirst(first_name) &amp;&amp; verifLast(last_name)) {
            const res = await dispatch(sendInviteEmail(email, first_name, last_name));
            if (res === 'False') emailNotExist();
            else if (res === 'Already Send') emailAlreadySend();
            else mailSend()
            setEmail('')
            setFirst('')
            setLast('')
          } else {
            if (!verifMail(email)) setEmailErr('Veuillez entrer un mail valide !');
            if (!verifFirst(first_name)) setFirstErr('Veuillez entrer un prenom !');
            if (!verifLast(last_name)) setLastErr('Veuillez entrer un nom !');
          }
        };
      
        return (&lt;&gt;
          &lt;Modal size=&quot;lg&quot; className='addFreeModal' show={show} onHide={() =&gt; {handleClose(); setFirst(''); setEmail(''), setLast(''), setEmailErr(''); }}&gt;
            &lt;Modal.Header closeButton&gt;
              &lt;Modal.Title&gt;Inviter un Consultant&lt;/Modal.Title&gt;
            &lt;/Modal.Header&gt;
            &lt;Modal.Body className='formBody'&gt;
              &lt;Form&gt;
                &lt;Form.Control className='form-input' onChange={(e) =&gt; setEmail(e.target.value)} type=&quot;email&quot;
                  placeholder=&quot;Email&quot; /&gt;
                {emailErr &amp;&amp; &lt;p className='txt-danger'&gt;{emailErr}&lt;/p&gt;}
                &lt;Form.Control className='form-input' onChange={(e) =&gt; setFirst(e.target.value)} type=&quot;email&quot;
                  placeholder=&quot;Pr&amp;eacute;nom&quot; /&gt;
                {first_nameErr &amp;&amp; &lt;p className='txt-danger'&gt;{first_nameErr}&lt;/p&gt;}
                &lt;Form.Control className='form-input' onChange={(e) =&gt; setLast(e.target.value)} type=&quot;email&quot;
                  placeholder=&quot;Nom&quot; /&gt;
                {last_nameErr &amp;&amp; &lt;p className='txt-danger'&gt;{last_nameErr}&lt;/p&gt;}
              &lt;/Form&gt;
            &lt;/Modal.Body&gt;
            &lt;Modal.Footer&gt;
              &lt;Button className='cancel-btn' onClick={() =&gt; {handleClose(); setFirst(''); setEmail(''), setLast('')}}&gt; Annuler  &lt;/Button&gt;
              &lt;Button className='send-btn' onClick={handleForm}&gt; Envoyer &lt;/Button&gt;
            &lt;/Modal.Footer&gt;
          &lt;/Modal&gt;
        &lt;/&gt;);
      }
  
  </code></pre>
  <p>And his style:</p>
  <pre><code>
      $graycolor: #ecececec;
      $cancelColor: #57585a;
      $greenColor: #3de4cf;
      $blueColor: #426DEA;
      $redcolor: red;
      $whitecolor: #fff;
      $blackColor: #000;
      
      .addFreeModal {
        .modal-content {
          border-radius: 30px;
        }
        
        .modal-lg {
          max-width: 40% !important;
        }
      
        .modal-header {
          justify-content: center;
          padding: 1rem 1rem 0rem 1rem;
      
          button.close {
            opacity: 1;
            height: 5%;
            width: 5%;
            border-radius: 50px;
            font-family: monospace;
            background-color: $blueColor !important;
            &amp;:hover {
              opacity: 1;
              color: white;
              background-color: $blueColor !important;
            }
          }
      
          .close {
            color: #fff;
            text-shadow: none;
            font-size: 1.8rem;
            padding: 1px 0px 28px 0px;
            font-weight: 400;
          }
      
          .modal-title {
            font-weight: 600;
            font-size: 2.5em;
            margin: 20px auto 0px auto;
            color: $greenColor;
          }
        }
      
        .form-control{
          height: calc(2em + .5rem + 2px);
        }
        .form-input {
          width: 70%;
          margin: 10px 0px 0px 15%;
          border: solid #d1d2d4 1px;
          border-radius: 12px;
        }
      
        .txt-danger {
          font-size: 15px;
          text-align: center;
        }
        
        .modal-footer {
          padding: 0rem 1rem 1.5rem 1rem;
      
          .send-btn {
            width: 34%;
            height: calc(2em + .5rem + 2px);
            border-radius: 20px;
            font-weight: 600;
            font-size: 1.2em;
            background-color: $blueColor;
            margin-bottom: 5%;
            &amp;:hover {
              cursor: pointer;
            }
          }
      
          .cancel-btn {
            width: 34%;
            height: calc(2em + .5rem + 2px);
            font-weight: 600;
            background-color: $graycolor !important;
            border: solid $graycolor 1px;
            border-radius: 20px;
            font-size: 1.2em;
            color: $cancelColor;
            margin-bottom: 5%;
            &amp;:hover {
              cursor: pointer;
            }
          }
        }
      }
  
  </code></pre>