Office js TypeError: #<Object> is not a function in react component

Question

I have created a react component and built it. After the build imported onto an HTML page and rendering the page in Word add-in's task pane. I added multiple buttons to insert a paragraph onto word document, if I click on the buttons I see the following error:

js_includes_doctype.jsx?v=06-30-2022_1211&lp=Mon_Aug_29_10_38_28_PDT_2022&c=8_108:3 Uncaught (in promise) TypeError: #<Object> is not a function at Array.forEach (<anonymous>) at Array.c [as each] (js_includes_doctype.jsx?v=06-30-2022_1211&lp=Mon_Aug_29_10_38_28_PDT_2022&c=8_108:3:14458) at OSF.DDA.ApiMethodCall.constructCallArgs (word-web-16.00.js:25:65928) at OSF.DDA.AsyncMethodCall.verifyAndExtractCall (word-web-16.00.js:25:67509) at <computed> (word-web-16.00.js:25:80872) at Object.executeRichApiRequestAsync (word-web-16.00.js:25:89680) at word-web-16.00.js:25:410703 at new Promise (<anonymous>) at t.executeAsync (word-web-16.00.js:25:410658) at o.syncPrivate (word-web-16.00.js:25:386161)

Here is the react code I have added in the component:

import '@servicenow/now-button';


const callApi = () => {
    Word.run(async (context) => {
        const paragraph = context.document.body.insertParagraph("This is para", "End");
        let contentControl = paragraph.insertContentControl();
        paragraph.font.color = "blue";
        await context.sync();
    });
}

export const initializeOffice = () => new Promise((resolve, reject) => {
    console.log("ASdadqdadsa")
    try{
        Office.initialize = resolve;
    }catch(e){
        reject();
    }
});

const view = (state, { updateState, dispatch }) => {
    return (
        <div>
            {initializeOffice()}
            <button label="Insert3" variant="primary" size="md" icon="" config-aria={{}} tooltip-content="" on-click={callApi}></button>
        </div>
    )
};

export default view;

I don't have the privilege to render the component directly on the add-in task pane, so I have to import it onto an HTML page and render the component. I am loading the office js script as a script tag on the HTML page. Could not find a resolution after googling and researching. Any help would be great. Thanks

Answer 1

You have to assign a function to Office.initialize first thing when the page loads. Also, why you are wrapping the Office.initialize assignment in a Promise-returning function?

I think your Office.initialize should be the place where the React code is invoked. I took the following from this sample: Word Add-in Getting Started Fabric React .

/* Render application after Office initializes. If the page is rendered in an Office add-in, show the UI using the render function 
defined in App.tsx. Otherwise, show a progress indicator with a message. */
 Office.initialize = () => {
    render(
        <App title={title} />,
        container
    );
 };