webpack-build-server example doesn't build/run according to README instructions

[dmitriid]

You want to:

• report a bug
• request a feature

Current behaviour

• Clone git@github.com:socketio/socket.io.git
• cd socket.io/examples/webpack-build-server
• npm install
• npm run build or npm start will fail with multiple webpack errors, see below

The Readme states:

the bufferutil and utf-8-validate are optional dependencies. You can also omit them, as they have their JS fallback, and ignore the WebPack warning.

These are solved by installing a specific version of uws as described in this comment: #3249 (comment)

However, there remains the issue of webpack not being able to process ws. See end of issue for stacktraces.

If I update webpack.config.js with either noParse: /ws/ or externals: ['ws'], npm start will fail with ws not found.

Steps to reproduce (if the current behaviour is a bug)

See above

Expected behaviour

The build step and the run step should complete successfully. As the example is an entry point for many, it's incredibly frustrating to not being able to build and run it.

Setup

• OS: MacOS 10.15.3 (19D76) (Catalina)
• browser: N/A
• socket.io version: Commit 47161a6 from Sep 20, 2019 (current master)
• Node.js version: v13.7.0

Other information (e.g. stacktraces, related issues, suggestions how to fix)

After installing uws

$> npm run build

> webpack-build-server@1.0.0 build /Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server
> webpack --config ./support/webpack.config.js

Hash: b1733135f95f90aed782
Version: webpack 2.7.0
Time: 296ms
    Asset    Size  Chunks                    Chunk Names
server.js  357 kB       0  [emitted]  [big]  main
   [0] ./~/debug/src/index.js 314 bytes {0} [built]
   [3] ./~/engine.io-parser/lib/index.js 10.8 kB {0} [built]
   [4] ./~/socket.io-parser/index.js 8.04 kB {0} [built]
   [7] ./~/engine.io/lib/transport.js 2.15 kB {0} [built]
   [8] ./~/has-binary2/index.js 1.51 kB {0} [built]
   [9] ./~/isarray/index.js 132 bytes {0} [built]
  [16] ./~/socket.io/lib/namespace.js 5.95 kB {0} [built]
  [24] ./~/socket.io/lib/index.js 12.9 kB {0} [built]
  [25] ./lib/index.js 474 bytes {0} [built]
  [35] ./~/engine.io/lib/engine.io.js 2.38 kB {0} [built]
  [50] ./~/socket.io-adapter/index.js 5.42 kB {0} [built]
  [51] ./~/socket.io-client/package.json 3.23 kB {0} [built]
  [53] ./~/socket.io/lib 160 bytes {0} [built]
  [54] ./~/socket.io/lib/client.js 5.9 kB {0} [built]
  [55] ./~/socket.io/lib/parent-namespace.js 917 bytes {0} [built]
    + 52 hidden modules


... warnings skipped ...

ERROR in ./~/ws/lib/websocket.js
Module parse failed: /Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/node_modules/ws/lib/websocket.js Unexpected token (347:6)
You may need an appropriate loader to handle this file type.
|       compress: true,
|       fin: true,
|       ...options
|     };
|
 @ ./~/ws/index.js 3:18-44
 @ ./~/engine.io/lib/server.js
 @ ./~/engine.io/lib/engine.io.js
 @ ./~/socket.io/lib/index.js
 @ ./lib/index.js

ERROR in ./~/ws/lib/websocket-server.js
Module parse failed: /Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/node_modules/ws/lib/websocket-server.js Unexpected token (56:6)
You may need an appropriate loader to handle this file type.
|       path: null,
|       port: null,
|       ...options
|     };
|
 @ ./~/ws/index.js 6:19-52
 @ ./~/engine.io/lib/server.js
 @ ./~/engine.io/lib/engine.io.js
 @ ./~/socket.io/lib/index.js
 @ ./lib/index.js

ERROR in ./~/ws/lib/stream.js
Module parse failed: /Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/node_modules/ws/lib/stream.js Unexpected token (66:4)
You may need an appropriate loader to handle this file type.
|
|   const duplex = new Duplex({
|     ...options,
|     autoDestroy: false,
|     emitClose: false,
 @ ./~/ws/index.js 5:34-57
 @ ./~/engine.io/lib/server.js
 @ ./~/engine.io/lib/engine.io.js
 @ ./~/socket.io/lib/index.js
 @ ./lib/index.js

ERROR in ./~/ws/lib/permessage-deflate.js
Module parse failed: /Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/node_modules/ws/lib/permessage-deflate.js Unexpected token (343:8)
You may need an appropriate loader to handle this file type.
|
|       this._inflate = zlib.createInflateRaw({
|         ...this._options.zlibInflateOptions,
|         windowBits
|       });
 @ ./~/ws/lib/receiver.js 5:26-57
 @ ./~/ws/index.js
 @ ./~/engine.io/lib/server.js
 @ ./~/engine.io/lib/engine.io.js
 @ ./~/socket.io/lib/index.js
 @ ./lib/index.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-build-server@1.0.0 build: `webpack --config ./support/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-build-server@1.0.0 build 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/dmitrii.dimandt/.npm/_logs/2020-03-05T10_09_55_138Z-debug.log

After I add only externals: ['ws'] to webpack.config.js and run npm start

> webpack-build-server@1.0.0 start /Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server
> node dist/server.js

/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:10504
throw new Error("Module parse failed: /Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/node_modules/ws/lib/websocket.js Unexpected token (347:6)\nYou may need an appropriate loader to handle this file type.\n|       compress: true,\n|       fin: true,\n|       ...options\n|     };\n| ");
^

Error: Module parse failed: /Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/node_modules/ws/lib/websocket.js Unexpected token (347:6)
You may need an appropriate loader to handle this file type.
|       compress: true,
|       fin: true,
|       ...options
|     };
|
    at Object.<anonymous> (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:10504:7)
    at __webpack_require__ (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:20:30)
    at Object.<anonymous> (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:9611:19)
    at __webpack_require__ (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:20:30)
    at Server.init (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:5340:27)
    at new Server (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:5297:8)
    at Function.attach (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:5223:16)
    at Server.initEngine (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:3325:21)
    at /Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:3310:10
    at Encoder.encode (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:720:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-build-server@1.0.0 start: `node dist/server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-build-server@1.0.0 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/dmitrii.dimandt/.npm/_logs/2020-03-05T10_11_31_577Z-debug.log

After I add only module: { noParse: /ws/ } to webpack.config.js and run npm start

> webpack-build-server@1.0.0 start /Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server
> node dist/server.js

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

Error: Cannot find module './lib/websocket'
Require stack:
- /Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
    at Function.Module._load (internal/modules/cjs/loader.js:862:27)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:9305:19)
    at __webpack_require__ (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:20:30)
    at Server.init (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:5121:27)
    at new Server (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:5078:8)
    at Function.attach (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:5004:16)
    at Server.initEngine (/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js:2834:21) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/dmitrii.dimandt/Projects/temp/socket.io/examples/webpack-build-server/dist/server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-build-server@1.0.0 start: `node dist/server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-build-server@1.0.0 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/dmitrii.dimandt/.npm/_logs/2020-03-05T10_12_40_805Z-debug.log

[Cy6erBr4in]

+1 I have the exact same issue.

[darrachequesne]

For future readers:

I've updated the example to use webpack 5: https://github.com/socketio/socket.io/tree/master/examples/webpack-build-server

Reference: https://socket.io/docs/v4/server-with-bundlers/#Webpack-5