I finally resolved my issue.
The problem turned out to be in the usage of localhost
in manifest for the add-in. I changed my webpack-dev-server to listen on IP address of the desktop and use http protocol instead of https. After this change, the add-in registered in split second and I saw my custom function accessible in the sheet.
I originally tried to configure the local webserver to use "0.0.0.0" to listen to the network calls as well but apparently my company is not allowing any local servers running on the desktop to be accessed outside of the machine (local network) for security reasons therefore I chose the option to use the IP instead.
This is the devServer config entry in webpack I used:
devServer: {
host: "xx.xxx.xxx.xxx",
allowedHosts: "all",
hot: true,
headers: {
"Access-Control-Allow-Origin": "*",
},
port: 9000,
},
As I had said I also adjusted my manifest from https://localhost:3000
which is the default to use http://<IP of the host>:9000
https did not work well since the certs were not matching host's logical IP address.
My original problem was slightly different than yours although the error message was exactly the same. My add-in was not loading at all and it was taking over 25 seconds to get an error from Excel on failed add-in installation reporting failure to load a required resource.
These are the errors I spotted in my Add-in log (OfficeAddin.log.txt)n:
8/19/2022 16:09:37 Medium Resource Resource Download Error Details: SolutionId=05c2e1c9-3e1d-406e-9a91-e9ac648541c3 , AppVersion=1.0.0.6
8/19/2022 16:09:37 Unexpected Resource The server for this resource is unavailable.
The second challenge for custom functions executing properly was to configure shared runtime. There are two places in manifest + changes in webpack config.
Manifest:
1st place is right after <HOST>
in main tag block
<Requirements>
<Sets DefaultMinVersion="1.1">
<Set Name="SharedRuntime" MinVersion="1.1"/>
</Sets>
</Requirements>
2nd place is right after <HOST xsi:type="Workbook">
and inside <Page>
tag:
<Host xsi:type="Workbook">
<Runtimes>
<Runtime resid="Taskpane.Url" lifetime="long" />
</Runtimes>
<AllFormFactors>
<ExtensionPoint xsi:type="CustomFunctions">
<Script>
<SourceLocation resid="JS-URL" />
</Script>
<Page>
<SourceLocation resid="Taskpane.Url"/>
</Page>
<Metadata>
<SourceLocation resid="JSON-URL" />
</Metadata>
<Namespace resid="Functions.Namespace" />
</ExtensionPoint>
</AllFormFactors>
Webpack adjustments are covered in the link you hinted.