Hot reloading forces a complete reload of the whole add-in

[Rick-Kirkham]

Prerequisites

Please answer the following questions before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• [ x] I am running the latest version of Node and the tools
• [ x] I checked the documentation and found no answer
• [ x] I checked to make sure that this issue has not already been filed

Expected behavior

When a code source file is changed while debugging in VSC, hot reloading should make the change but leave the app in the same place where it was, so the developer doesn't have to go through the all the steps in the UI to get back to where they were.

Current behavior

The change in the source file cause the entire app to reload and returns the app to its default starting state. There is also an error in the VSC debugging console: "Cannot apply update. Need to do a full reload."

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Sideload an add-in in VSC
2. Run the add-in.
3. Make a change in a code source file.

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: Windows 10
• Node version: 16.13.2
• Office version: 2302 16127.20000
• Tool version: ?

Failure Logs

Please include any relevant log snippets, screenshots or code samples here.

[millerds]

When I was trying this out I saw the error in VS code's debug pane, but my changes to the taskpane code (ts and html) were updated in the host (Excel in my case) without having to do anything.

The VS code error indicates something is going on that could be wrong, but it looks like something a little more specific that needs to be discovered.

[Rick-Kirkham]

Was your add-in in the same state after the change or did it revert to its starting state? In my case, the add-in is supposed to display the subject line of the email in the task pane just below the Run link after I lick the Run link. If hot loading is working as it should this subject should still be on the screen in the task pane. But when I make a change, it disappears and the task pane is back in it's starting state.

[millerds]

Since the taskpane.html is part of the entry point for code it seems that reloading the html on a code change is actually correct. Seems to me like the automatic reloading of the taskpane is an indication that hot reloading is working.

[Rick-Kirkham]

What you're describing is "Live Reloading". The term "Hot Reloading" means that only the file that's changed is reloaded. When I watch the NodeJS window where the webpack devserver is running, I see that only the taskpane.js is reloaded, so the webpack part of the system is working. For some reason, Outlook (or the embeded WebView2) is reloading the HTML file too. It shouldn't be doing that. Do you have a Mac so we can see if it happens on a Mac too?

[millerds]

So I'm not much of an expert on hot reloading so I had to do some digging. It looks like in order for the module replacement to happen as you say then there needs to be some acceptance code (see https://webpack.js.org/guides/hot-module-replacement/) added to the module (taskpane.ts) that you what to be hot swappable. HMR will start at the point of the change and walk up the tree looking for that code and if it's not found by the time it gets to the entry point then it fails. By default, when that happens webpack dev server does reload of the whole thing (which you referred to as live reloading).

From what I can see this extra acceptance code (and typescript types pacakge in some cases) was never part of our template and so it was always doing a live reload instead of a module replacement. This is something we would have to change in our templates in order to work with HMR.

[Rick-Kirkham]

OK. In the meantime, we should be sure our documentation says that we support live reloading, but not hot reloading. This applies to the add-in part of a merged Teams/Outlook app as well.

@preethikakiru for visibility.

[suuunly]

Is there any updates on the hot reload feature? 😁
Currently trying to create an Excel Addin, and with Live reload, it runs extremely slowly - so any suggestions would be much appreciated 😅

[AndrueAnderson]

We're trying to build a Word add-in and we're running into the same problem. Would love an update on hot reload feature

[suuunly]

We're trying to build a Word add-in and we're running into the same problem. Would love an update on hot reload feature

Hey, I found an ok solution to the problem. You can read about it on this issue:
OfficeDev/Office-Addin-TaskPane-React#158

Hope this helps 😁