search

OfficeDev / generator-office

Yeoman generator for building Microsoft Office related projects.
https://www.npmjs.com/package/generator-office
MIT License
819 stars 207 forks source link

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

Closed asolopovas closed 1 year ago

asolopovas commented 2 years ago

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.

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.

millerds commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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