Unable to sideload the Office Add-in when running 'npm start'

Question

I'm trying to run Outlook-add-in using npm start. But it gives me an error that Sideloading the Office Add-in... Error: Unable to start debugging. Error: Unable to sideload the Office Add-in. Error: Sideload is not supported.

I'm running direct demo project which Microsoft provided for Outlook-add-in. Also rund npm run dev-server before npm start as i'm running in mac. https://learn.microsoft.com/en-us/outlook/add-ins/quick-start?tabs=yeomangenerator

I have done some research to find the issue but unable to come up with any. Any help would be grateful.

Answer 1

I'm not sure if this has been answered already, but I had the same issue. I used the following link to enable side-loading: Sideload Outlook plugins for testing

Once you have that enabled, you should be able to at least run the dev-server and work with the plugin:

npm run dev-server

Answer 2

I'm facing the same issue and after some research I found out the Outlook is not supported, only Excel, PowerPoint and Word can be debugged on desktop.

Answer 3

Well I started off with the official documentation & followed what is mentioned on microsoft website step-by-step for MS Word add-in development and got stuck on that same npm start step, I always got the error

can't run this add-in from localhost

& don't know why everyone of us facing this issue(they should address or change it on the official site as well) but this command:

npm run dev-server

truly works like a charm for me after messing my head with npm start for one week.

Open two windows or instances of powershell in Visual Studio Code or direct Powershell and run npm run dev-server in the first instance and npm start in the second one.

(this debugging tool "Microsoft Edge DevTools Preview" from the Microsoft store made my life easier too for debugging purposes, Must use if you're a regular Add-In developer)

Answer 4

For developers on Mac, it is recommended using Node Version Manager to install Node.js with the right permissions.

Also, you need to make sure the certificate is installed correctly.

Run this command: npx office-addin-dev-certs install.

If the certificates are already installed, you'll see a message:

You already have trusted access to https://localhost.

If the certificates are not installed, it will show a message:

The developer certificates have been generated in ...
Installing CA certificate "Developer CA for Microsoft Office Add-ins"...

You should then see the dialog asking to install the certificate.

After saying yes, it should then show:

You now have trusted access to https://localhost.
Once the certificates are installed, you should be able to run the dev server without problems.

See Unable to start the dev server for more information.

Answer 5

If you want to test with Office 365 for desktop, you install it as you do with web. If it's installed on your Outlook web account, it should show up on your Outlook 365 Desktop app when you're logged in there.

Some gotchas:

• There is not "Get add-ons" or "Store" link on the ribbon in 365 – you just use https://outlook.office.com/ to install addons (easiest to follow the link from File→Manage addons which will open your browser)
• You may have to restart Outlook after adding new add-ins from your browser
• Make sure you've got activated "optional connected experiences" – if this is unticked, the buttons won't show up in the ribbons at all!
• On the web, there is no ribbon – you have to click the "…" on a message to see your addon at the bottom of a long menu :-(

Answer 6

Bear in mind, you must have a Business Office365 account in order to run add-ins within Outlook Desktop app.

It didn't work with my personal account, although I was not getting any error or warning from Outlook. That's not mentioned in their documentation either.

After logging in to Outlook Desktop with the business account, and running npm start I was able to see my custom add-in created with yo office-generator in the ribbon.

Answer 7

Faced this issue on macOS as well. It worked only by manually adding the add-in on outlook and accessing it with the desktop app.

Answer 8

tldr;

It seems like the npm server isn't able to create the OfficeApp manifest file in the wef folder.

1. Have a look at the last line of the error and
2. copy the manifest file from your project folder to this location, while prepending the OfficeApp ID Guid to the file name
3. Do npm run start

and .....Bingo! it opens up Excel and loads the Addin.

---

Detailed Description

Following the document Build an Excel task pane add-in (latest Microsoft Docs), when we do the below on a Mac

npm run dev-server and then do
npm run start it throws the error as OP mentioned.

Error: Unable to start debugging.
Error: Unable to sideload the Office Add-in.
Error: Unable to register the Office Add-in.1
Error: EXDEV: cross-device link not permitted, link 'manifest.xml' -> '/Users/<user>/Library/Containers/com.microsoft.Excel/Data/Documents/wef/<officeapp_id_guid>.manifest.xml'

Office AppId:
If you open the manifest file in your project, the GUID in the last line of the error is shown in the XML.
<OfficeApp xmlns=.......>
<Id>officeapp_id_guid</Id>
...other XML
</OfficeApp>

To Fix the issue

It seems like the npm server isn't able to create the OfficeApp manifest file in the wef folder.

1. Go to the folder shows in the last line of the error /Users/<user>/Library/Containers/com.microsoft.Excel/Data/Documents/wef/
   If this folder does not exist, you can create it. Also note that I'm mentioning it for Excel, however, replacing the path for Word should work as well. Just refer to the path shown in the last line of the error.
2. Copy the manifest.xml file from your project to the wef folder, by prepending the GUID shown in the error message. For example, from your project folder, do
   cp manifest.xml /Users/<user>/Library/Containers/com.microsoft.Excel/Data/Documents/wef/<officeapp_id_guid>.manifest.xml
3. run npm runs start

and .....

Bingo! it opens up Excel and loads the Addin.

Answer 9

I experienced the same issue when updating npm packages. I tried the following:

npm run dev-server

It resulted in an error:

> office-addin-taskpane-js@0.0.1 dev-server [path to addin]
> webpack-dev-server --mode development

TypeError: CleanWebpackPlugin is not a constructor
    at module.exports ([path to addin]\webpack.config.js:58:4)
    at handleFunction ([path to addin]\node_modules\webpack-cli\bin\utils\prepareOptions.js:21:13)
    at prepareOptions ([path to addin]\node_modules\webpack-cli\bin\utils\prepareOptions.js:9:5)
    at requireConfig ([path to addin]\node_modules\webpack-cli\bin\utils\convert-argv.js:117:14)
    at [path to addin]\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports ([path to addin]\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
    at Object.<anonymous> ([path to addin]\node_modules\webpack-dev-server\bin\webpack-dev-server.js:84:40)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:744:10)
    at startup (internal/bootstrap/node.js:238:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:572:3)

So I opened webpack.config.js and changed the require of the CleanWebpackPlugin to destructuring syntax (I added the curly brackets):

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

Now after starting with npm start I still see the sideload error, but the add in started working again. I'm not sure what the problem is, but maybe this might lead you in the right direction for a solution.