White page / blank screen on IE11 Word Addin

[flowni]

Expected behavior

After generating a new Word Add-in with Yeoman Generator (React + TypeScript), it should run on IE11 integrated browser.

Current behavior

After generating a new Word Taskpane with Yeoman Generator (React + TypeScript), I see a blank page when opening the task pane. My Word version is using IE11 on purpose (M365 Version 1808 (Build 10730.20348)) because I need it for some Word 2019 versions that I want to support (https://learn.microsoft.com/en-us/office/dev/add-ins/concepts/browsers-used-by-office-web-add-ins).

Steps to Reproduce

1. Install Yeoman: npm install -g yo generator-office
2. Create new project: yo office
3. Select: Office Add-in Task Pane project using React framework -> TypeScript -> "testname" -> Word
4. Launch Addin (cd testname -> npm run dev-server and in another terminal npm run start)
5. Get a blank page

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Operating System: Windows Server Base 2022
• Node version: v18.15.0
• Office version: M365 Version 1808 (Build 10730.20348)
• Tool version: yo --version = 4.3.1

Failure Logs

Attaching the debugger it shows the following error: Line: 76 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.

[millerds]

That error usually means there is a javascript error that happened when loading one of the add-in code pages.

Looking at those versions a few things come to mind:

• I'm wondering if you can get newer versions of Office (M365). I believe that version would still use an older version of web view technology.
• Your using a server version of the operating system. The tooling designed for client OSs so there might be an incompatibility and/or missing component. Do you have IE and/or Edge installed?
• Are you able to load add-ins from the store (as opposed to sideloading them from a development environment)?

[flowni]

Hi @millerds, thanks for the fast reply!

To your points:

• I have installed this specific M365 version (16.0.10730.20348) as suggested by this MS document to test on IE11 my Add-In: https://learn.microsoft.com/en-us/office/dev/add-ins/testing/ie-11-testing
• Yes, IE is pre-installed and I also installed Edge afterwards
• Yes, this is working (see image below for Wikipedia for example). I am also wondering why yo generated is going blank but this template is working fine: https://github.com/OfficeDev/Office-Addin-TaskPane-React

[millerds]

What do you mean by the template is working when the generated project is not?

Note that the office.js not loading error means that one of the js files being loaded is encountering an exception which prevents further processing including the command to load office.js.

[flowni]

I mean that this GitHub project is working fine (not going blank): https://github.com/OfficeDev/Office-Addin-TaskPane-React. However when I generate a new project with yo office as described in the post, it is not working and showing the white page. Do you know what the difference is between these two, since most of the files seem to be the same?

[millerds]

I assume you are trying using a clone of the project on the same machine that the generated project is failing on. Are you running the default case which uses excel or are you triggering it to run on Word?

The generated project is a copy of that repro followed by executing "convertToSingleHost.js" script and updating package.json to remove unnecessary script commands. The task pane code being run (which is where the error is happening) is the same.

[flowni]

Ah yes, I meant that I cloned the project and sideloaded it. My steps for the Office-Addin-TaskPane-React repo are the following: I first install the packages with npm install. Then, I adapted it to run on Word, specifically in package.json the start script "start": "office-addin-debugging start manifest.word.xml --app word". Then I run it with npm run dev-server in one terminal and in another terminal npm run start.

In the yo generated I only have to execute npm start.

[flowni]

After writing this, I thought that the package.json dependencies are different, but they are quite similar and copying them from the working project to the yo generated hasn't solved the problem unfortunately.

There must be another difference between those project.

[millerds]

After changing the "start" script you should be able to do "npm start" as well.

The differences that would affect the rendering would be in the src directory. I would look there. You could also look at the files in the src directory of the generated project that isn't working and start commenting out lines until you find it works again. That would help narrow down the code that is causing the error.

[flowni]

The files look very similar - I have not yet been able to notice any significant difference. I also tried it on a usual client instead of server Windows version and get the same blank screen.

[millerds]

Have you tried commenting out lines of code in the ts files to narrow down which one is causing the error?

[timbarclay]

I appear to get the same behaviour as this in Excel.

Reproduction steps:

• generate a new project for Excel with react and typescript
• use the steps here to install Office version 16.0.10730.20348
• side load the newly generated project with npm start
• task pane just shows a blank white screen

If I put a console.log in index.tsx, it never gets logged.

If I attach the F12 debugger quick enough, I do see the 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.

[timbarclay]

Further to my above comment, I've tried running in Edge in IE mode so that I could run the debugger and refresh the page. I'm not 100% sure whether this is a fair equivalent to Excel in Office 16.0.10730.20348. However, this breaks on the following exception in office.js:

[flowni]

Hey @timbarclay, thanks for the reporting and adding further information to this case. Is this project also working fine on your side: https://github.com/OfficeDev/Office-Addin-TaskPane-React ? I still could not find the problem with commenting out lines..

[millerds]

It looks like a case of polyfill/transpiling not doing enough. The output of webpack includes the '=>' operator which is not supported in the ie webview. I'm not sure what point it stopped working (or why) because '=>' has been in the template for at least a couple years. You can change '(...) => {...}' in the code in the src folder to 'function (...) {...}' and that will help, but the fluentui lib output also seem to use '=>' and so you would also have to stop using fluentui. I think there should be some webpack plugin setting that will account for this, but I haven't found it yet.

[millerds]

Looks like @fluentui/react version 8.68 introduced a dependency on @fluentui/react-portal-compat-context which includes '=>' in the library code. If you change package.json dependencies to be '"@fluentui/react": "8.67.0",' you can work around this problem for the time being.

[flowni]

Hi @millerds, yes it is working, thanks for your investigation! However I had to upgrade it from the yo generated version "^8.52.3" to "8.67.0".

Do you know why it is not handled by polyfill automatically?

[millerds]

Glad to hear!

Interestingly enough another investigation I was doing revealed another problem with polyfilling. There is a typo in the webpack.config.js file the essentially doesn't include the polyfills in the taskpane bundle. References to "polyfills" (with an 's') should be "polyfill' (no 's').

However, even with that fix newer version of @fluentui/react aren't built for compatibility with IE11 (see https://github.com/microsoft/fluentui/wiki/Internet-Explorer-11-Sunset) and from what I understand commonly used polyfill settings don't build imported modules for performance reasons. It may be possible to adjust webpack.config.js to include specific libraries in babel-loader (which I believe is doing the polyfill), but I haven't figured out what settings would work.