Webserver stops soon after starting in new project on Mac

I created a new Angular project with typescript using this generator for a Word Add-in. I’ve done some debugging, and I hope it helps us solve the problem. Or someone can help correct my assumptions about how everything is working together if I’m off track! 😉

I’m running a fresh install of Node 14.2.0 using NVM after uninstalling node to help me debug the issue. The problem is that shortly after starting the web server the web server dies and I can’t hit the default built app.

Ultimately I think the problem stems from a new dependency issue in webpack-dev-server that the community has been attempting to address and release the past few weeks. I got there as I was trying to understand an error where fsevents was throwing “Cannot find module ‘nan’” while running yo office. I had tried clearing node_modules and running npm install directly, as well as installing nan as a project dependency before finding those github Issues.

I’m going to fiddle with different node/dependency versions and see if I can get into a state where I can develop the Add-in but I wanted to bring it up if there is anyone else experiencing the same problem, or if anyone has any suggestions or workarounds.

---

$ npm run start:web --verbose output

$ npm run start:web --verbose                                                                                      2.7.1 Mon 18 🕑  5:33:18
npm info it worked if it ends with ok
npm verb cli [
npm verb cli   '/Users/hedges/.nvm/versions/node/v14.2.0/bin/node',
npm verb cli   '/Users/hedges/.nvm/versions/node/v14.2.0/bin/npm',
npm verb cli   'run',
npm verb cli   'start:web',
npm verb cli   '--verbose'
npm verb cli ]
npm info using npm@6.14.4
npm info using node@v14.2.0
npm verb run-script [ 'prestart:web', 'start:web', 'poststart:web' ]
npm info lifecycle office-addin-taskpane-angular@0.0.1~prestart:web: office-addin-taskpane-angular@0.0.1
npm info lifecycle office-addin-taskpane-angular@0.0.1~start:web: office-addin-taskpane-angular@0.0.1

> office-addin-taskpane-angular@0.0.1 start:web /Users/hedges/projects/test/testing-angular-ts
> office-addin-debugging start manifest.xml web

Debugging is being started...
App type: web
Starting the dev server... (webpack-dev-server --mode development)
The dev server is running on port 3000. Process id: 17047
Debugging started.
npm verb lifecycle office-addin-taskpane-angular@0.0.1~start:web: unsafe-perm in lifecycle true
npm verb lifecycle office-addin-taskpane-angular@0.0.1~start:web: PATH: /Users/hedges/.nvm/versions/node/v14.2.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/hedges/projects/test/testing-angular-ts/node_modules/.bin:/Users/hedges/.rbenv/shims:/Users/hedges/.nvm/versions/node/v14.2.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/Applications/Wireshark.app/Contents/MacOS:/Applications/Postgres.app/Contents/Versions/latest/bin:/Users/hedges/projects/flutter/bin
npm verb lifecycle office-addin-taskpane-angular@0.0.1~start:web: CWD: /Users/hedges/projects/test/testing-angular-ts
npm info lifecycle office-addin-taskpane-angular@0.0.1~poststart:web: office-addin-taskpane-angular@0.0.1
npm verb exit [ 0, true ]
npm timing npm Completed in 17756ms
npm info ok 

Key $ yo office output

> fsevents@1.2.12 install /Users/hedges/projects/test/testing-angular-ts/node_modules/watchpack/node_modules/fsevents
> node-gyp rebuild

internal/modules/cjs/loader.js:1023
  throw err;
  ^

Error: Cannot find module 'nan'
Require stack:
- /Users/hedges/projects/test/testing-angular-ts/node_modules/watchpack/node_modules/fsevents/[eval]
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1020:15)
    at Function.Module._load (internal/modules/cjs/loader.js:890:27)
    at Module.require (internal/modules/cjs/loader.js:1080:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at [eval]:1:1
    at Script.runInThisContext (vm.js:131:20)
    at Object.runInThisContext (vm.js:297:38)
    at Object.<anonymous> ([eval]-wrapper:10:26)
    at Module._compile (internal/modules/cjs/loader.js:1176:30)
    at evalScript (internal/process/execution.js:94:25) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/hedges/projects/test/testing-angular-ts/node_modules/watchpack/node_modules/fsevents/[eval]'
  ]
}
gyp: Call to 'node -e "require('nan')"' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/hedges/.nvm/versions/node/v14.2.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
gyp ERR! System Darwin 19.4.0
gyp ERR! command "/Users/hedges/.nvm/versions/node/v14.2.0/bin/node" "/Users/hedges/.nvm/versions/node/v14.2.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/hedges/projects/test/testing-angular-ts/node_modules/watchpack/node_modules/fsevents
gyp ERR! node -v v14.2.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok 

[TCourtneyOwen]

@RyanHedges Thanks for reporting this issue. I will if I can repro this as well on Mac using the latest version of NodeJs. I will keep you posted.

-Courtney

[RyanHedges]

Thanks for the help! I’m going to close this issue since the exceptions thrown don’t seem to cause the seen issue. If I can help with anything, please let me know.