web add-in load issues on Outlook desktop only

Question

I've got a problem where my add-in is running fine in Outlook Online, but won't run in Outlook desktop. The add-in is successfully activated from the manifest, but fails after load. This is a React + TypeScript project (testing using NodeJS + webpack in Webstorm).

I've narrowed the problem to the usage of ANY require statement for importing a reference. If I eliminate it, it runs fine and shows my test Office UI Fabric CompoundButton component. With the code, it spins and eventually shows a blank page. No script exceptions are thrown, and this is enabled in IE settings.

Why would this fail only on the desktop?

To repro, use three files:

Start/main page: myapp.tsx
Which renders TestComponent.tsx
Which references test.jsx

//myapp.tsx
import TestComponent from './components/TestComponent';
import * as $ from 'jquery';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';

const render = (Component) => {

    ReactDOM.render(
        
            
        ,
        document.getElementById('container')
    );
};

Office.initialize = function () {

    $(document).ready(function () {

        console.log('====myapp.tsx.Office.initialize(): entered');

        render(TestComponent);
    });
};

if ((module as any).hot) {

    console.log('====index.tsx.module() foo');

    (module as any).hot.accept('./components/App', () => {
        const NextApp = require('./components/App').default;
        render(NextApp);
    });
}

//TestComponent.tsx

import * as React from 'react';
import { CompoundButton } from 'office-ui-fabric-react/lib/Button';

//============
// BAD CODE!
//import foo = require('../scripts/test.jsx');
//============

export default class TestComponent extends React.Component {

    render() {

        console.log('====TestComponent.render()');

        //============
        // BAD CODE!
        //foo.testFunction();
        //============

        return(
            
                Create account
            
        );
    }
}

//test.jsx

export function testFunction(){
    console.log("test.jsx: testFunction");
}

Marc LaFleur Marc LaFleur · Accepted Answer · 2018-07-26T19:42:29

Office 2013 and 2016 for Windows (desktop apps) use an embedded IE 11 browser for rendering. IE 11 doesn't support a lot of the recent JS features you find in Edge, Chrome, and Firefox. As such, you either need to polyfill the functionality you need to provide alternative paths for IE 11.

One quick-fix may be just changing how TypeScript is generating JS so that it is compatible with IE 11:

{
    "compilerOptions": {
        "skipLibCheck": true,
        "lib": [ "es5", "dom", "es2015.promise" ]
    }
}

web add-in load issues on Outlook desktop only

1 Answers