Is there a way to use ES6 syntax in a React Outlook Add-in?

Question

We're building an Outlook Add-in with React. As our main app is built with React too, we want to use the same code for both. And a lot of code is written with ES6 syntax.

The add-in works well in those environments:

• Outlook Webmail (Chrome, Safari, Edge)
• The latest version of Outlook from Office 365

But not in Outlook 2016 or 2013 . I guess the latest version of Outlook uses Edge for rendering the Add-in, that's why it works. 2013 / 2016 are with IE11, which do not support ES6.

There is a lot of code with a lot of dependencies and I don't want to translate all in non-ES6, it will take too much time.

The fact is that our main app works well in IE11, with the help of react-app-polyfill . With those two lines at the very beginning of the index.tsx file, it works:

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";

I did exactly the same in our add-in, but we still get a blank page when we open it on the older versions of Outlook. The main difference between the web app and the add-in is that the first one was created with create-react-app. The add-in is configured with webpack.

Did I miss something? If you need more information or code, let me know. Thanks!

Answer 1

Well if you are building a react app you should have some kind of pre-processor/bundler like webpack in place. Just drop in Babel and transpile it down ES5. This way you have to transform the code by hand and can share the same code base even for legacy engines.

Answer 2

I'm currently developping an Outlook add-in for Outlook 2016 Desktop (which is using IE11) and I can use ES6 features.

Did you use yeoman and generator-office to create the boilerplate for the project?

Like @philipp said, you will have to use a transpiler like babel to convert it down and configure your bunbdler (eg webpack) to use that transpiler for js/jsx files.

// webpack.config.js
    ...
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: [
                    'react-hot-loader/webpack',
                    'babel-loader',
                ],
                exclude: /node_modules/
            },
            ...
         ],
         ...