How to get `yo office --project-type excel-functions` working with webpack hot realoading?

[asolopovas]

Hi I have been to get the template fixed in stackoverflow but nobody seems to have an answer.

Basically If I start a dev server and then change for example taskpane.html I get the following errors in the console.

./node_modules/regenerator-runtime/runtime.js 24 KiB [built] [code generated]
./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
./node_modules/events/events.js 14.5 KiB [built] [code generated]
webpack 5.52.1 compiled successfully in 24679 ms

<i> [webpack-dev-middleware] wait until bundle finished: /taskpane.html
assets by status 28.4 KiB [cached] 7 assets
assets by status 1.54 MiB [emitted]        
  assets by path *.js 1.53 MiB
    assets by info 1.54 KiB [immutable] 4 assets    4 assets
  assets by path *.json 1.92 KiB 5 assets       
  assets by path *.html 3.51 KiB
    asset taskpane.html 2.53 KiB [emitted]      
    asset functions.html 527 bytes [emitted]    
    asset commands.html 485 bytes [emitted]     
  asset manifest.xml 5.09 KiB [emitted] [from: manifest.xml] [copied]
Entrypoint polyfill 903 KiB (844 KiB) = polyfill.js 902 KiB polyfill.5e6604ae28ee1ce4baa4.hot-update.js 394 bytes 2 auxiliary assets
Entrypoint functions 221 KiB (267 KiB) = functions.js 220 KiB functions.5e6604ae28ee1ce4baa4.hot-update.js 396 bytes 2 auxiliary assets
Entrypoint taskpane 224 KiB (266 KiB) = taskpane.js 223 KiB taskpane.5e6604ae28ee1ce4baa4.hot-update.js 394 bytes 2 auxiliary assets
Entrypoint commands 220 KiB (266 KiB) = commands.js 220 KiB commands.5e6604ae28ee1ce4baa4.hot-update.js 394 bytes 2 auxiliary assets
cached modules 603 KiB [cached] 434 modules     
runtime modules 109 KiB 48 modules

ERROR in C:\Users\asolo\git\excel\excel-fn\src\commands\commands.ts
./src/commands/commands.ts 46:33-36
[tsl] ERROR in C:\Users\asolo\git\excel\excel-fn\src\commands\commands.ts(46,34)
      TS2304: Cannot find name 'add'.

ERROR in C:\Users\asolo\git\excel\excel-fn\src\commands\commands.ts
./src/commands/commands.ts 47:35-40
[tsl] ERROR in C:\Users\asolo\git\excel\excel-fn\src\commands\commands.ts(47,36)
      TS2304: Cannot find name 'clock'.

ERROR in C:\Users\asolo\git\excel\excel-fn\src\commands\commands.ts
./src/commands/commands.ts 48:39-48
[tsl] ERROR in C:\Users\asolo\git\excel\excel-fn\src\commands\commands.ts(48,40)
      TS2304: Cannot find name 'increment'.     

ERROR in C:\Users\asolo\git\excel\excel-fn\src\commands\commands.ts
./src/commands/commands.ts 49:33-43
[tsl] ERROR in C:\Users\asolo\git\excel\excel-fn\src\commands\commands.ts(49,34)
      TS2552: Cannot find name 'logMessage'. Did you mean 'onmessage'?

ERROR in C:\Users\asolo\git\excel\excel-fn\src\taskpane\taskpane.ts
./src/taskpane/taskpane.ts 37:33-36
[tsl] ERROR in C:\Users\asolo\git\excel\excel-fn\src\taskpane\taskpane.ts(37,34)
      TS2304: Cannot find name 'add'.

ERROR in C:\Users\asolo\git\excel\excel-fn\src\taskpane\taskpane.ts
./src/taskpane/taskpane.ts 38:35-40
[tsl] ERROR in C:\Users\asolo\git\excel\excel-fn\src\taskpane\taskpane.ts(38,36)
      TS2304: Cannot find name 'clock'.

ERROR in C:\Users\asolo\git\excel\excel-fn\src\taskpane\taskpane.ts
./src/taskpane/taskpane.ts 39:39-48
[tsl] ERROR in C:\Users\asolo\git\excel\excel-fn\src\taskpane\taskpane.ts(39,40)
      TS2304: Cannot find name 'increment'.     

ERROR in C:\Users\asolo\git\excel\excel-fn\src\taskpane\taskpane.ts
./src/taskpane/taskpane.ts 40:33-43
[tsl] ERROR in C:\Users\asolo\git\excel\excel-fn\src\taskpane\taskpane.ts(40,34)
      TS2552: Cannot find name 'logMessage'. Did you mean 'onmessage'?

8 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.52.1 compiled with 8 errors in 770 ms

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

I am expecting to open https://localhost:3000/taskpane.html and see the outup update rather then throw a bunch of errors on change in a fresh project.

Current behavior

With dev-server task running I try to edit taskpane.html the dev-server task throws a bunch of error on change described above.

Steps to Reproduce

https://github.com/asolopovas/excel-fn-test

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: Edition Windows 10 Pro Version 21H2 Installed on ‎14/‎Apr/‎22 OS build 19044.1889 Experience Windows Feature Experience Pack 120.2212.4180.0

• Node version: v16.16.0

• Office version: Microsoft® Excel® for Microsoft 365 MSO (Version 2207 Build 16.0.15427.20166) 32-bit

• Tool version: 1.9.1

[millerds]

This is a limitation of custom functions specifically. You have to shut down dev-server make the change, rebuild, and restart. The problem is with the functions file which has to be handled in a special way because it's not loaded in the add-in in the same way everything else is. It's used to generate a different file a custom webpack plugin and this file is sent to excels separate loading process for function and it doesn't currently support hot reloading. This is something we should have on our backlog.

[asolopovas]

It doesn't have to hot reloaded, at least if it was reloading the plugin on each save and not throw various errors. Because if I have to rebuild package for 10 15 second on each change its easier to develop plugin outside the ecosystem of microosft and then import it with script lab.

[millerds]

Saving a file triggers hot-reloading in webpack and that is the point of incompatibility with custom functions (which is what the errors are complaining about). It looks like someone else has come up with a solution (though I'm not sure why that works).

https://github.com/OfficeDev/Excel-Custom-Functions/issues/319#issuecomment-1248207298