title: Where could we put `Office.onReady()` to make sure Office.js could fully load every time
body: <p>I'm debugging an Excel add-in built in React. Previously, the developer coded the app as if it was a website rather than an Excel add-in, and did not pay attention to Office.js. As a result, when we run it in Excel, we have the famous error <code>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.</code></p>
  
  <p><a href="https://i.stack.imgur.com/gjLwG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gjLwG.png" alt="enter image description here"></a></p>
  
  <p>I searched for <code>Office.onReady</code> and <code>Office.initialize</code> in the whole project, I did not find them.</p>
  
  <p>Here is <code>frontend/src/index.tsx</code>, where <a href="https://github.com/dvajs/dvahttps://github.com/dvajs/dva" rel="nofollow noreferrer">dva</a> is a "framework based on redux, redux-saga and react-router (Inspired by elm and choo)".</p>
  
  <pre><code>import 'react-app-polyfill/ie11';
  import 'react-app-polyfill/stable';
  import dva from 'dva';
  import './index.css';
  import router from './router';
  import AuthModel from './models/auth';
  import SubscribtionModel from './models/subscription';
  import AppModel from './models/app';
  import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
  
  //@ts-ignore
  //import createLoading from 'dva-loading';
  
  // 1. Initialize
  const app = dva();
  //app.use(createLoading());
  
  // 2. Plugins
  // app.use({});
  
  // 3. Model
  //@ts-ignore
  app.model(AuthModel);
  app.model(SubscribtionModel)
  app.model(AppModel);
  // 4. Router
  //@ts-ignore
  app.router(router);
  
  // 5. Start
  app.start('#root');
  
  initializeIcons();
  </code></pre>
  
  <p>Does anyone know where I should put <code>Office.onReady()</code> such that we could make sure Office.js can fully load every time the add-in is launched?</p>
  
  <p><strong>Edit 1:</strong></p>
  
  <p>I tried to mimic <a href="https://github.com/OfficeDev/script-lab/blob/06751273095a1ab54c0c644d212b7a30c904824a/packages/common/src/components/PageSwitcher/index.tsx" rel="nofollow noreferrer">this file</a> and changed one of my <code>index.tsx</code> to </p>
  
  <pre><code>  render() {
      const { items, farItems } = this.props;
  
      console.log("Here is Office:");
      console.log(Office);
  
      return (
        &lt;AwaitPromiseThenRender
          promise={Promise.resolve().then(async () =&gt; {
                await Office.onReady();
          })}
        &gt;
          &lt;CommonHeader
            items={items.map((item: IHeaderItem) =&gt; this.renderItem(item))}
            farItems={farItems.map((item: IHeaderItem) =&gt; this.renderItem(item))}
          /&gt;
        &lt;/AwaitPromiseThenRender&gt;
      );
    } 
  </code></pre>
  
  <p>It returned a TypeScript error: <code>Property 'onReady' does not exist on type 'typeof Office'.  TS2339</code>, whereas the object <code>Office</code> is well printed in the console. Does anyone have any idea of the problem?</p>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>I tried to add the following code in my <code>frontend/src/index.tsx</code> above. It still returned <code>Property 'onReady' does not exist on type 'typeof Office'.  TS2339</code>.</p>
  
  <pre><code>export function render(oldRender: () =&gt; void) {
      Office.onReady((reason: any) =&gt; {
        oldRender();
      });
  }
  </code></pre>