I have a pretty simple project that looks up some info from a mongo table and lists it on the screen. There is a loading state to show a spinner and message, and when i run 'yarn build' and host the output files, it just gets stuck on the loading screen, and i only see some randomy console.log outputs, not all my code.
What is going wrong with the build process that works fine when running locally with 'yarn start' ?
import React, { useEffect } from 'react';
import { ZOHO } from './vendor/ZSDK';
import {BrowserRouter as Router , Routes, Route, Link,NavLink, Redirect, withRouter} from 'react-router-dom';
import JiraTable from './components/JiraTable';
import CircularProgress from '@mui/material/CircularProgress';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
function App() {
console.log("INITIALIZING")
const [zohoContactId, setContactId] = React.useState('');
const [usrEmail, setUsrEmail] = React.useState('');
const [isLoaded, setIsLoaded] = React.useState(false);
const [error, setError] = React.useState(null);
useEffect(() => {
async function init() {
console.log("BEFORE PAGELOAD");
try{
await ZOHO.embeddedApp.on("PageLoad",function(data) {
console.log("PageLoad", data);
console.log(data)
//Custom Business logic goes here
let entity = data.Entity;
let recordID = data.EntityId;
// Set data we want from CRM into props
ZOHO.CRM.API.getRecord({Entity:entity,RecordID:recordID})
.then((data) => {
console.log(data)
setContactId(data.data[0].id)
setUsrEmail(data.data[0].Owner.email)
console.log(usrEmail)
setIsLoaded(true);
}).catch((e) => console.log(e))
})
console.log("AFTER PAGELOAD");
return await ZOHO.embeddedApp.init();
}catch(e){
console.log(e)
}
}
init();
}, [])
const ContentLoader = () =>{
// handle rendering conditionally based on AJAX response
if (error) {
// API Data Error State: render the error state
return (
<div>Error</div>
)
} else if (!isLoaded) {
// API Data Not Loaded: render the loading progress spinner
return (
<div align="center">
<CircularProgress />
<Typography variant="h2"> Loading data....</Typography>
</div>
)
} else {
// API Data Loaded Succesfully:
// render the completed interface with data loaded, triggered by the state update of isLoaded and !error (no error)
return (
<JiraTable custId={zohoContactId} usrEmail={usrEmail} />
)
}
}
return (
<Router>
<div className="App">
<Paper>
{ContentLoader()}
</Paper>
</div>
</Router>
);
}
export default App;
Yarn Build Output
Local build using yarn start which works fine
