Webserver stops soon after starting in new project on Mac

[RyanHedges]

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 @TCourtneyOwen!

I want to confirm the expected behavior of using this tool so that we're both not attempting to fix a problem that's a red herring and something that's local to only me.

After generating the project, I should be able to cd into the project, run npm run start:web or npm start then hit https://localhost:3000. I should then see something in the browser similar to what's seen in the gif in the README.md?

[akrantz]

npm run start:web will ensure that the dev-server is running. npm start will do the same but for "desktop" apps as a target will also sideload the add-in which will launch the Office app.

In any case, once the dev-server is running, you can go to the browser https://localhost:3000 to see something. The manifest contains the actual full url which Office or the browser can use to load the add-in. For development this is https://localhost:3000/taskpane.html (I believe -- this is off the top of my head.)

You could likely go back to a previous webpack / webpack-dev-server version which doesn't have the problem. Or once there is a version available that has the fix, you can update to it.

[RyanHedges]

Thanks @akrantz! It sounds like I might have misunderstood the expectations after reading the README. The dev-server process does continue to run. When I visit /taskpane.html in my browser I see the sideload message which sounds like this is expected because it hasn't been sideloaded yet. While there does seem to be issues in webpack/webpack-dev-server it doesn't appear to be the source of my problem. If there is anything I can do to help please let me know!

[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.