[BUG] React mgt not working in IE11 or Outlook Desktop

[skyhawk92]

Describe the bug I am using mgt people picker and before that mgt login in react outlook Add In project. For a test I took this template: https://github.com/OfficeDev/Office-Addin-TaskPane-React Everything is working in Edge and also in Outlook desktop app, but as soon as I add mgt to project, it stops working on desktop and also on IE11, since Outlook desktop is using integrated IE11

To Reproduce Steps to reproduce the behavior:

1. Add mgt to React Outlook AddIn project
2. Add Login and PeoplePicker or any other element
3. npm install and npm start, then install add in and check in Edge/Chrome and Outlook desktop or IE11
4. On IE11 and Outlook desktop it loads blank screen

Project with these things added is here: https://github.com/skyhawk92/Office-Addin-Mgt-Test

Expected behavior Expected to see same Login button and open the Addin normally

Environment (please complete the following information):

• OS: Windows10
• Browser: Edge, Chrome and IE11
• Framework React
• Context Office Add-ins, Outlook

Additional context So far I have also tried to add pollyfills, es5 and babel-loader but the app does not compile at all in such case. I was following these 2 cases: https://stackoverflow.com/questions/51545291/web-add-in-load-issues-on-outlook-desktop-only https://stackoverflow.com/questions/58503895/is-there-a-way-to-use-es6-syntax-in-a-react-outlook-add-in

[ghost]

Hello skyhawk92, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[vogtn]

Hi @skyhawk92

sorry to hear about the issues with our components and react. I assume since you were able to get the toolkit running in react/edge enviornment you're utilizing our mgt-react wrapper.

Since the components are running in ie11 in your app, there are additional polyfills required which are listed here

Sounds like however, since the app is not compiling (and your project links seem to be missing) I'd make sure the proper webcomponent resources are provided. In our sample app this requires explicitly importing @webcomponents/webcomponentsjs. Here is a link to our react sample and how it's running.

If you have additional context to the specific error, feel free to post here. 👍

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.

[skyhawk92]

Hi @vogtn

I fixed the link to our sample app https://github.com/skyhawk92/Office-Addin-Mgt-Test

Since this is Add In project, it's settings look to me different than your sample. The configs are done in webpack.config.js. I also tried adding target "ie 11" there. I didn't know where to put the pollyfills, but tried in the main App file, which made no difference. It still works in Web Outlook but not on desktop.

[vogtn]

Hi @skyhawk92 please try the following:

in your package.json upgrade to:

"dependencies": {
"@microsoft/mgt-react": "^1.3.0-preview.2",
"@webcomponents/webcomponentsjs": "2.2.10"
}

Then run npm install

In your App.tsx:

import '../../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js';

import {Providers, MsalProvider, LoginType} from '@microsoft/mgt';
import { PeoplePicker, Login } from '@microsoft/mgt-react';

Order is important here. Let me know if this doesn't work for you, I'll push a branch. Sorry for the wait!

[skyhawk92]

Hi @vogtn

sorry for late reply. I tried to add those lines you mentioned (and deleted the ones I added which were then doubled), and on the first look it seems that it works. Project opens in desktop outlook as well and upon sign in, takes us to web login.

So the main issue of not running in desktop is resolved, further functionalities are yet to be tried, but that I think is a separate issue, if they happen.

Thank you for answer.

[vogtn]

Glad to see it seems to be working. Closing since original issue seems to be solved. Please feel free to raise separate issues if individual functionalities are missing or broken, and we can resolve the specifics.

Thanks!