Unable to debug Outlook add-in on Mac because: Sideload to the Outlook app is not supported.

[p6l-richard]

Prerequisites

Please answer the following questions before submitting an issue.

• I am running the latest version of Node and the tools
• I checked the documentation and found no answer
  • I only found contradicting information in the docs
• I checked to make sure that this issue has not already been filed
  • there is a similar GH issue which is concerned with one of the starter examples though; I specifically experience issues around debugging on mac with VSCode

Expected behavior

When running:

1. npm build:dev, then
2. npx office-addin-debugging start ./dist/manifest.xml
   I expect the script to start outlook and sideload my add-in

Current behavior

After running the dcommand, it logs errors (see Failure logs below) to the terminal window.

Steps to Reproduce

Prerequesites

• Mac w/ Apple M1 chip and macOS Monterey @ Version: 12.5
• Outlook for Mac @ Version: v16.63
• VSCode for Mac @ Version: 1.70.1 (Universal)

How to reproduce

1. Download project. Go to reproduction repository addin-debug & clone the repository.
2. Move into project. cd outlook-reproduction
3. Install pnpm. npm install -g pnpm
4. Install dependencies. pnpm i
5. Build outlook's /dist folder. pnpm outlook build:dev
6. Debug and sideload the project. In a second terminal window, run pnpm outlook debug

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: macOS Monterey @ Version: 12.5
• Node version: v18.7.0
• Office version: Mac for Outlook 16.63
• Tool version: ? Not sure how I can check that

Failure Logs

> [email protected] outlook /Users/<my-user-name>/frontend
> pnpm --filter outlook "debug"
> [email protected] debug /Users/<my-user-name>/frontend/apps/outlook
> pnpm exec office-addin-debugging start ./dist/manifest.xml
Debugging is being started...
App type: desktop
Sideloading the Office Add-in...
Error: Unable to start debugging.
Error: Unable to sideload the Office Add-in.
Error: Sideload to the Outlook app is not supported.

[p6l-richard]

I've also tried following: pnpm outlook debug --dev-server pnpm out look serve --dev-server-port 8082

This gives me a different error (specific to outlook):

> [email protected] debug /Users/<my-user-name>/frontend/apps/outlook
> pnpm exec office-addin-debugging start ./dist/manifest.xml "--dev-server" "pnpm" "outlook" "serve" "--dev-server-port" "8082"

Error: Unable to start debugging.
Error: The current platform is not supported: outlook

[p6l-richard]

Trying with yeoman generator

I wanted to see if it works with a yeoman generated project, so followed the instructions from: https://github.com/OfficeDev/generator-office

Successfully generated my project

      Congratulations! Your add-in has been created! Your next steps:

      1. Go the directory where your project was created:

         cd /Users/<my-user-name>/outlook-teams

      2. Start the local web server and sideload the add-in:

         npm start

      3. Open the project in VS Code:

         code .

         For more information, visit http://code.visualstudio.com.

      Please visit https://docs.microsoft.com/office/dev/add-ins for more information about Office Add-ins.

      Please visit https://docs.microsoft.com/office/dev/add-ins/outlook/sideload-outlook-add-ins-for-testing for more information about Outlook sideloading.

Error: Sideload to the Outlook app is not supported.

It generated my project and I tried running npm start in there.

There is a issue about converting the JSON to XML on Mac[1], so I converted it manually to XML and got the following error about sideloading not being supported on outlook for mac:

> [email protected] start
> office-addin-debugging start manifest/manifest.xml

Debugging is being started...
App type: desktop
The dev server is already running on port 3000.
Sideloading the Office Add-in...
Error: Unable to start debugging.
Error: Unable to sideload the Office Add-in. 
Error: Sideload to the Outlook app is not supported.

---

Attachment: JSON > XML transformation error on mac

[1]
This time, it's about the manifest transformation from JSON to XML Error: .Net 5 or greater is required for json manifests.

<my-user-name>@MBP outlook-teams % npm start

> [email protected] start
> office-addin-debugging start manifest/manifest.json

Debugging is being started...
App type: desktop
The developer certificates have been generated in /Users/<my-user-name>/.office-addin-dev-certs
Installing CA certificate "Developer CA for Microsoft Office Add-ins"...
Password:
You now have trusted access to https://localhost.
Certificate: /Users/<my-user-name>/.office-addin-dev-certs/localhost.crt
Key: /Users/<my-user-name>/.office-addin-dev-certs/localhost.key
Starting the dev server... (webpack serve --mode development)
The dev server is running on port 3000. Process id: 14748
Sideloading the Office Add-in...
/bin/sh: dotnet: command not found
Error: Unable to start debugging.
Error: Unable to sideload the Office Add-in.
Error: .Net 5 or greater is required for json manifests.

It looks like the error is thrown inside the convertJsonToXmlManifest function:

async function convertJsonToXmlManifest(manifestPath: string): Promise<string> {
  return new Promise((resolve, reject) => {
    if (manifestPath.endsWith(".json") && fs.existsSync(manifestPath)) {
      console.log("Converting json to back compat xml");
      const convertToolPath = path.resolve(__dirname, ".\\DevXTool.exe");
      const newManifestPath = path.join(process.env.TEMP as string, "manifest.xml");
      const command = `"${convertToolPath}" "${manifestPath}" "${newManifestPath}"`;

      childProcess.exec(command, (error, stdout) => {
        if (error) {
          console.log(`Error converting file:\n ${stdout}\n ${error}`);
          reject("");
        } else {
          console.log(`Successfully converted manifest to xml:\n ${stdout}`);
          stripBom(newManifestPath);
          resolve(newManifestPath);
        }
      });
    } else {
      reject(new Error(`The file '${manifestPath}' is not valid`));
    }
  });
}

Discovering the DevXTools executable (unable to execute)

I actually went all the way and downloaded aspnetcore runtime to run .net apps but I still couldn't get it do run.

Even when I cd into the node_modules directory where DevXTools.exe is located, I can't execute it.

I did run chmod +x ./DevXTool.exe to make it executable (I cd'd into the node_module directory).

I'm getting the following error:

<my-user-naem>@MBP path-to-node_modules/lib % ./DevXTool.exe
zsh: exec format error: ./DevXTool.exe

Googling around, I find that it may be due to the fact that it's a 32 bit executable.

Is there a way to convert the DevXTool.exe executable into something I can run on an M1 mac?

[millerds]

Looks like you've got a couple things going on here . . .

First the original issue of loading in mac outlook. As mentioned in #569 (comment) the work for automatic sideloading in mac outlook was not done and so it has to be manually sideloaded (https://docs.microsoft.com/en-us/office/dev/add-ins/outlook/sideload-outlook-add-ins-for-testing . . . which was noted in the yo office output). It is something on our backlog.

Second . . . you are using the developer preview template for using a teams manifest (json based) which is a prerelease version and only works on Windows. The documentation (https://docs.microsoft.com/en-us/office/dev/add-ins/quickstarts/outlook-quickstart-json-manifest) notes this.

If you want to develop on mac you'll need to use a different template (the basic template is the most similar to the teams manifest preview) and do the manual sideloading.

[p6l-richard]

@millerds

I see, thanks for clarifying.

For the manual sideloading of a non-teams manifest (XML), is the Safari Web Inspector my only choice then?

I'm having trouble with that too on Outlook for Desktop app but keep it separate in the Q&A forum.