I've got a problem for few weeks and I'm not even sure of his reason.
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.
However, with the versions deployed in test and dev, it works fine for every user.
I've tried many things to debug this:
Remove the LazyLoading of this component.
Include the chunk in the head of index.html.
Suppress the CSS file and paste his content into another CSS file to reduce the number of chunks.
Change the instance type where it's deployed to have the same environment as dev and test.
Here's some screenshots of the difference:
The chunk called on Windows and Android
The render on Windows and Android
The render on MacOS and IOS
Here the code of the component:
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) => validator.isEmail(email);
const verifFirst = (first_name) => first_name.length > 2;
const verifLast = (last_name) => last_name.length > 2;
const emailNotExist = () => addToast(`Echec de l'invitation, adresse mail erronée: ${email}`, {
appearance: 'error',
autoDismiss: true,
});
const emailAlreadySend = () => addToast('Invitation déja envoyée cette semaine réessayez plus tard !', {
appearance: 'error',
autoDismiss: true,
});
const mailSend = () => handleClose('true');
const handleForm = async () => {
setEmailErr('');
setFirstErr('');
setLastErr('');
if (verifMail(email) && verifFirst(first_name) && 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 (<>
<Modal size="lg" className='addFreeModal' show={show} onHide={() => {handleClose(); setFirst(''); setEmail(''), setLast(''), setEmailErr(''); }}>
<Modal.Header closeButton>
<Modal.Title>Inviter un Consultant</Modal.Title>
</Modal.Header>
<Modal.Body className='formBody'>
<Form>
<Form.Control className='form-input' onChange={(e) => setEmail(e.target.value)} type="email"
placeholder="Email" />
{emailErr && <p className='txt-danger'>{emailErr}</p>}
<Form.Control className='form-input' onChange={(e) => setFirst(e.target.value)} type="email"
placeholder="Prénom" />
{first_nameErr && <p className='txt-danger'>{first_nameErr}</p>}
<Form.Control className='form-input' onChange={(e) => setLast(e.target.value)} type="email"
placeholder="Nom" />
{last_nameErr && <p className='txt-danger'>{last_nameErr}</p>}
</Form>
</Modal.Body>
<Modal.Footer>
<Button className='cancel-btn' onClick={() => {handleClose(); setFirst(''); setEmail(''), setLast('')}}> Annuler </Button>
<Button className='send-btn' onClick={handleForm}> Envoyer </Button>
</Modal.Footer>
</Modal>
</>);
}
And his style:
$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;
&: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%;
&: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%;
&:hover {
cursor: pointer;
}
}
}
}