Running Quip Live Apps from local resources fails with Node v11.1+

[nzapponi]

npm start fails with Node v11.1+ when trying to run the live app locally for fast development.

webpack successfully compiles the app, but when I try to fetch it from Quip, webpack-dev-server crashes.
The issue is that the spdy module, a dependency of webpack-dev-server, does not yet support Node v11.1 and higher.

Downgrading Node to v10 fixes the issue.

See related issues: webpack/webpack-dev-server#1592 & spdy-http2/node-spdy#350

Even if webpack-dev-server was patched, though, it may be wise to update quip-apps-webpack-config to support a newer version of webpack-dev-server (v3+)

Here's the full log:

nzapponi-ltm:meeting-scheduler nzapponi$ npm start

> [email protected] start /Users/nzapponi/Git Repositories/Quip/meeting-scheduler
> NODE_ENV=development webpack-dev-server --https

Generating SSL Certificate
Project is running at https://localhost:8888/webpack-dev-server/
webpack output is served from /dist
Content not from webpack is served from /Users/nzapponi/Git Repositories/Quip/meeting-scheduler/app/dist
Hash: 5f448c58750683f7e764
Version: webpack 3.5.1
Time: 5245ms
      Asset      Size  Chunks                    Chunk Names
     app.js    959 kB       0  [emitted]  [big]  main
    app.css   11.3 kB       0  [emitted]         main
 app.js.map    1.2 MB       0  [emitted]         main
app.css.map  84 bytes       0  [emitted]         main
   [1] ./node_modules/moment/moment.js 147 kB {0} [built]
  [19] ./node_modules/core-js/modules/_core.js 122 bytes {0} [built]
  [88] ./node_modules/core-js/modules/es6.array.iterator.js 1.12 kB {0} [built]
 [114] ./node_modules/core-js/modules/es6.regexp.exec.js 178 bytes {0} [built]
 [115] ./node_modules/core-js/modules/es6.regexp.flags.js 201 bytes {0} [built]
 [258] multi babel-polyfill quip-apps-compat ./src/root.jsx 52 bytes {0} [built]
 [259] ./node_modules/babel-polyfill/lib/index.js 833 bytes {0} [built]
 [260] (webpack)/buildin/global.js 509 bytes {0} [built]
 [261] ./node_modules/core-js/shim.js 8.22 kB {0} [built]
 [457] ./node_modules/regenerator-runtime/runtime.js 24.1 kB {0} [built]
 [458] ./node_modules/core-js/fn/regexp/escape.js 108 bytes {0} [built]
 [461] ./node_modules/quip-apps-compat/index.js 3.44 kB {0} [built]
 [462] ./src/root.jsx 1.2 kB {0} [built]
 [465] ./src/containers/App/App.js 19.4 kB {0} [built]
 [476] ./src/model.js 6.8 kB {0} [built]
    + 470 hidden modules
Child extract-text-webpack-plugin ../../../Git Repositories/Quip/meeting-scheduler/node_modules/extract-text-webpack-plugin/dist ../../../Git Repositories/Quip/meeting-scheduler/node_modules/css-loader/index.js??ref--1-2!../../../Git Repositories/Quip/meeting-scheduler/node_modules/postcss-loader/lib/index.js??ref--1-3!../../../Git Repositories/Quip/meeting-scheduler/node_modules/less-loader/lib/loader.js!../../../Git Repositories/Quip/meeting-scheduler/src/components/Scheduler/Scheduler.less:
       [0] ./node_modules/css-loader?{"modules":true,"importLoaders":1,"localIdentName":"[name]__[local]"}!./node_modules/postcss-loader/lib?{"plugins":[null]}!./node_modules/less-loader/lib/loader.js!./src/components/Scheduler/Scheduler.less 647 bytes {0} [built]
       [1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]
Child extract-text-webpack-plugin ../../../Git Repositories/Quip/meeting-scheduler/node_modules/extract-text-webpack-plugin/dist ../../../Git Repositories/Quip/meeting-scheduler/node_modules/css-loader/index.js??ref--1-2!../../../Git Repositories/Quip/meeting-scheduler/node_modules/postcss-loader/lib/index.js??ref--1-3!../../../Git Repositories/Quip/meeting-scheduler/node_modules/less-loader/lib/loader.js!../../../Git Repositories/Quip/meeting-scheduler/src/components/dialog/dialog.less:
       [0] ./node_modules/css-loader?{"modules":true,"importLoaders":1,"localIdentName":"[name]__[local]"}!./node_modules/postcss-loader/lib?{"plugins":[null]}!./node_modules/less-loader/lib/loader.js!./src/components/dialog/dialog.less 619 bytes {0} [built]
       [1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]
Child extract-text-webpack-plugin ../../../Git Repositories/Quip/meeting-scheduler/node_modules/extract-text-webpack-plugin/dist ../../../Git Repositories/Quip/meeting-scheduler/node_modules/css-loader/index.js??ref--1-2!../../../Git Repositories/Quip/meeting-scheduler/node_modules/postcss-loader/lib/index.js??ref--1-3!../../../Git Repositories/Quip/meeting-scheduler/node_modules/less-loader/lib/loader.js!../../../Git Repositories/Quip/meeting-scheduler/src/components/Tooltip/Tooltip.less:
       [0] ./node_modules/css-loader?{"modules":true,"importLoaders":1,"localIdentName":"[name]__[local]"}!./node_modules/postcss-loader/lib?{"plugins":[null]}!./node_modules/less-loader/lib/loader.js!./src/components/Tooltip/Tooltip.less 1.14 kB {0} [built]
       [1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]
Child extract-text-webpack-plugin ../../../Git Repositories/Quip/meeting-scheduler/node_modules/extract-text-webpack-plugin/dist ../../../Git Repositories/Quip/meeting-scheduler/node_modules/css-loader/index.js??ref--1-2!../../../Git Repositories/Quip/meeting-scheduler/node_modules/postcss-loader/lib/index.js??ref--1-3!../../../Git Repositories/Quip/meeting-scheduler/node_modules/less-loader/lib/loader.js!../../../Git Repositories/Quip/meeting-scheduler/src/components/Scheduler/Day/Day.less:
       [0] ./node_modules/css-loader?{"modules":true,"importLoaders":1,"localIdentName":"[name]__[local]"}!./node_modules/postcss-loader/lib?{"plugins":[null]}!./node_modules/less-loader/lib/loader.js!./src/components/Scheduler/Day/Day.less 7.07 kB {0} [built]
       [1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]
Child extract-text-webpack-plugin ../../../Git Repositories/Quip/meeting-scheduler/node_modules/extract-text-webpack-plugin/dist ../../../Git Repositories/Quip/meeting-scheduler/node_modules/css-loader/index.js??ref--1-2!../../../Git Repositories/Quip/meeting-scheduler/node_modules/postcss-loader/lib/index.js??ref--1-3!../../../Git Repositories/Quip/meeting-scheduler/node_modules/less-loader/lib/loader.js!../../../Git Repositories/Quip/meeting-scheduler/src/components/Scheduler/Day/Slot/Slot.less:
       [0] ./node_modules/css-loader?{"modules":true,"importLoaders":1,"localIdentName":"[name]__[local]"}!./node_modules/postcss-loader/lib?{"plugins":[null]}!./node_modules/less-loader/lib/loader.js!./src/components/Scheduler/Day/Slot/Slot.less 4.8 kB {0} [built]
       [1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]
webpack: Compiled successfully.
buffer.js:72
class FastBuffer extends Uint8Array {}
^

RangeError: Invalid typed array length: -4095
    at new Uint8Array (<anonymous>)
    at new FastBuffer (buffer.js:72:1)
    at Handle.onStreamRead [as onread] (internal/stream_base_commons.js:121:17)
    at Stream.<anonymous> (/Users/nzapponi/Git Repositories/Quip/meeting-scheduler/node_modules/handle-thing/lib/handle.js:120:12)
    at Stream.emit (events.js:187:15)
    at endReadableNT (/Users/nzapponi/Git Repositories/Quip/meeting-scheduler/node_modules/readable-stream/lib/_stream_readable.js:1010:12)
    at process.internalTickCallback (internal/process/next_tick.js:72:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `NODE_ENV=development webpack-dev-server --https`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nzapponi/.npm/_logs/2018-12-07T10_53_42_637Z-debug.log

[nzapponi]

@elsigh

[shellscape]

I'd recommend giving https://github.com/shellscape/webpack-plugin-serve a try. It doesn't suffer from issues like webpack-dev-server does in this case.

[jesseditson]

Just tested this and it looks like it's resolved via #44, resolving this issue.