Webpack builds signalr-client incorrectly

[lserhii]

I tried to use signalr-client with Angular 2 and webpack.
Webpack throws following warnings:

WARNING in ./~/signalr-client/dist/src/index.js
3:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/signalr-client/dist/src/Connection.js
11:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/signalr-client/dist/src/HttpClient.js
3:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/signalr-client/dist/src/HubConnection.js
3:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/signalr-client/dist/src/Transports.js
11:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/signalr-client/dist/src/Formatters.js
3:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/signalr-client/dist/src/Message.js
3:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

When I tried to load my application I got following error:

Uncaught Error: Cannot find module "."
at webpackMissingModule (vendor.bundle.js:83335) []
at Object.defineProperty.value (vendor.bundle.js:83335) []
at Object. (vendor.bundle.js:83344) []
at webpack_require (inline.bundle.js:53) []
at Object.173 (main.bundle.js:177) []
at webpack_require (inline.bundle.js:53) []
at Object.172 (main.bundle.js:122) []
at webpack_require (inline.bundle.js:53) []
at Object.171 (main.bundle.js:78) []
at webpack_require (inline.bundle.js:53) []
at Object.162 (main.bundle.js:24) []
at webpack_require (inline.bundle.js:53) []
at Object.559 (main.bundle.js:335) []
at webpack_require (inline.bundle.js:53) []

I found that webpack built code ( ./~/signalr-client/dist/src/index.js):

if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}

into

if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(!(function webpackMissingModule() { var e = new Error("Cannot find module ".""); e.code = 'MODULE_NOT_FOUND';; throw e; }()), exports);
if (v !== undefined) module.exports = v;
}

So I assume that issue occured because of using require in these places.

[moozzyk]

Can you show your project/minimal repro? I have not tried Angular and webpack yet but I am interesting how it uses and compiles the code.

[lserhii]

@moozzyk - https://github.com/SergeiNET/signalr-ng-sample

[moozzyk]

@SergeiNet - thank you - it is very helpful. I will try to look into it in the coming days.

[lserhii]

@moozzyk - One of the possible solutions to fix this issue is to change module: "umd" to "module": "commonjs" in the SignalR/client-ts/Microsoft.AspNetCore.SignalR.Client.TS/tsconfig.json

[moozzyk]

@SergeiNET - I think it would break other (browser/js) scenarios

[JohnLampitt]

Also facing this issue while using webpack, are you aware of a workaround in the meantime?

[boombang]

And me too

[boombang]

So I just copied the file signalr-client.js from node_modules into a separate folder of my project, then import this for example
import { HubConnection } from '../signalr/signalr-client.js';
and ... it works :)

[JohnLampitt]

@boombang cheers, thats got it working for me in the meantime

[dandax]

@boombang @JohnLampitt no need to copy from node_modules. You can just do this:

import { HubConnection } from 'signalr-client/dist/browser/signalr-client.js';

Although I'm just considering this a workaround until the errors are fixed.

[Marcelh1983]

@dandax I tried your workaround but get this error:

ERROR in vendor.5360e0958d9b8e1ce395.bundle.js from UglifyJs
Unexpected token: name (Base64EncodedHubProtocol) [vendor.5360e0958d9b8e1ce395.bundle.js:33797,10]

any workaround for that?

[moozzyk]

@SergeiNET #416 (comment) was spot on - webpack fails on umd modules. Changing module type to commonjs in the tsconfig fixes the issue. It does not affect the single-file version meant for browser because browserify can handle commonjs modules just fine. I was actually able to make the TS client work in node as well after this change: https://twitter.com/moozzyk/status/898650110468292608

@Marcelh1983 - the error you are seeing seems to be an issue where UglifyJs does not support ES6. Here is a thread in the WebPack repo about this issue.

[dandax]

@moozzyk this issue references using the SignalR client with Angular and the Angular CLI does not currently support ES6 (angular/angular-cli#2907) so we're actually worse off now than before

[moozzyk]

@dandax - The client will not compile for ES5 at the moment. I hope they will be able to fix this problem before we ship the final version of the signalr client - this is impacting many users and needs to be fixed on the angular-cli side.

[Marcelh1983]

@moozzyk Thanks for looking into the Uglify issue. I will keep track of the angular-cli issue