仅Outlook桌面上的Web加载项加载问题

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");
}

Answer 1

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" ]
    }
}