Using Office Javascript API in Next.js

Question

Using Office Javascript API in Next.js

Brian Tang 1

I've developed a web app in Next.js and I'm trying to use the Office.js API, but it doesn't work and it keeps getting this error message:

Error was not caught TypeError: window.history[method] is not a function  
    at Router.changeState (router.js?8684:912:35)  
    at eval (router.js?8684:1564:26)

I've tried importing the script by installing @microsoft/office-js and including

<Script   
    src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"   
    strategy='beforeInteractive'  
/>

in the _app.js file using 'next/script'.

Can anyone help with this? I can't seem to find any documentation to point me in the right direction

4 answers

Your answer

Answer 1

I discovered that office.js does something to the window.history.replaceState function. To get things working with the nextjs dev server, I needed to create a _document.tsx file like the one below, which patches the method after importing office.js. This patch is not required for production as we are using the output: 'export' build option with nextjs. This was a quick fix - I'm unsure what edge cases may come up due to the patch.

import { Head, Html, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang='en'>
      <Head>
        <meta charSet="UTF-8"/>
        <meta httpEquiv="X-UA-Compatible" content="IE=Edge"/>
        {process.env.NODE_ENV !== 'production' &&
          <script dangerouslySetInnerHTML={{
            __html: `window._replaceState = window.replaceState`
          }}/>}
        <script type="text/javascript"
                src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
        {process.env.NODE_ENV !== 'production' &&
          <script dangerouslySetInnerHTML={{
            __html: `window.history.replaceState = window._replaceState`
          }}
          />}
      </Head>
      <body>
      <Main/>
      <NextScript/>
      </body>
    </Html>
  );
}

Saksham Goyal 0 Reputation points

2024-01-30T04:42:55.8866667+00:00

how did you set your project up? I am having this same problem but this did not fix the problem. Edit: I fixed it as well, but in a different way. I put that in my _app.tsx instead of _document.tsx .

This way I can also do this to check when it its done loading/is ready:

useState to track when the officejs lib is loaded (<script onload={setLoaded(true)}...>)

use that to pass into the taskpane component

if the boolean is false, then officejs is not loaded so set loading state spinner

if it is loaded, then do whatever now

Answer 2

Elizabeth Samuel MSFT 11 Microsoft Employee

@Brian Tang I'm not familiar with Next.js but are you able to include the script entry under the head element?

Referencing the Office JavaScript API library

Brian Tang 1 Reputation point

2022-11-04T21:26:18.53+00:00

Unfortunately, not. Unlike React.js, I don't think Next.js uses a static html to run the scripts

Answer 3

Corben Leo 1

Hey @Brian Tang ,

Did you have any luck figuring this out? I'm stuck on the same issue currently.

Answer 4

this is my _app.tsx:

export default function App({ Component, pageProps } : any) : JSX.Element {
    const [loadedOffice, setLoadedOffice] = React.useState<boolean>(false);
    return (
            <Head>
                <title>{'Office Plugin'}</title>
                <meta
                    name='viewport'
                    content='minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no'/>
                <link rel='shortcut icon' href='/favicon.svg' />
            </Head>
            {process.env.NODE_ENV !== 'production' &&
                <Script
                    id='beforeloadOffice'
                    dangerouslySetInnerHTML={{__html : 'window._replaceState = window.replaceState'}}/>
            }
            <Script
                type='text/javascript'
                src='https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js'
                crossOrigin='anonymous'
                defer={false}
                onLoad={() => setLoadedOffice(true)}/>
            {process.env.NODE_ENV !== 'production' && loadedOffice &&
                <Script
                    id='afterloadOffice'
                    dangerouslySetInnerHTML={{__html : 'window.history.replaceState = window._replaceState'}}/>
            }
            <Component
                {...pageProps}
                loadedOffice={loadedOffice} />
    );
}

then in my taskpane.tsx:

export default function Taskpane({loadedOffice} : Props) : JSX.Element {
    if (!loadedOffice) {return <div> {'Loading...'} </div>;}

    console.log('Office.js loaded');

    Office.onReady(() => {
        console.log('Office.js ready');
    });

    return (
        // ..... whatever now
            mt={50}
            justify='center'>
            <Button size='xl'>{'Welcome to Mantine!'}</Button>
        </Group>
    );
}

Share via

Using Office Javascript API in Next.js

4 answers

Your answer