Office.js not fully loaded; Works when debugging from local host but not when deployed to Azure

Question

I finished developing my Excel Web add-in and everything worked great. When I deployed it to Azure it is through this error:
"Uncaught Error: Office.js has not fully loaded. Your app must call "Office.onReady()" as part of it's loading sequence (or set the
"Office.initialize" function). If your app has this functionality, try reloading this page."

I am calling Office.onReady() in the index.tsx file here:
Office.onReady(async () => {
isOfficeInitialized = true;
await LoadSettings();
render(App);
});

I also attempted to deploy the basic template for a React Taskpane Add-in(created using "yo office") and it gave me the same error.

Answer 1

This error seems to occur on slow networks. Looks like the MS code is waiting for "Office.initialize" to be initialized using a timeout loop. 
You have to set Office.initialize to a dummy function BEFORE calling Office.onReady() or simply just use Office.initialize...

This works:

------------------------------------------

Office.initialize = () => {}; // MUST BE BEFORE Office.onReady

Office.onReady( (info) =>
{

	console.log("Ready!");

})

Answer 2

This error seems to occur on slow networks. Looks like the MS code is waiting for "Office.initialize" to be initialized using a timeout loop. You have to set Office.initialize to a dummy function BEFORE calling Office.onReady() or just use Office.initialize... This works:

Office.initialize = () => {}; // MUST BE BEFORE Office.onReady Office.onReady( (info) => { console.log("Ready!"); })

Answer 3

Here is a link to the documentation that helped me solve my issue: https://learn.microsoft.com/en-us/office/dev/add-ins/publish/publish-add-in-vs-code

Thank you for the help to those that helped, the issue was that I did not use the command npm run build to create the /dist folder. After I followed the instructions for deploying the dist folder everything worked great!