signalr 8 / Angular: The package "url" wasn't found on the file system but is built into node

[ssougnez]

Is there an existing issue for this?

• [x] I have searched the existing issues

Describe the bug

I have an Angular application using es-build that works perfectly fine with @microsoft/signalr@7.0.12 but fails to compile with @microsoft/signalr@8.0.0 with the following issues:

⠹ Building...X [ERROR] Could not resolve "url"

    (disabled):node_modules/eventsource/lib/eventsource.js:1:20:
      1 │ var parse = require('url').parse;
        ╵                     ~~~~~

  The package "url" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "https"

    (disabled):node_modules/eventsource/lib/eventsource.js:3:20:
      3 │ var https = require('https');
        ╵                     ~~~~~~~

  The package "https" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "http"

    (disabled):node_modules/eventsource/lib/eventsource.js:4:19:
      4 │ var http = require('http');
        ╵                    ~~~~~~

  The package "http" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "util"

    (disabled):node_modules/eventsource/lib/eventsource.js:5:19:
      5 │ var util = require('util');
        ╵                    ~~~~~~

  The package "util" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

Note that I'm building a web application, so not something "for node".

Expected Behavior

The build should succeed as it does with the version 7.0.12.

Steps To Reproduce

• Create a new angular application using Angular CLI 17
• Insert the following code in the app.component.ts component and try to build:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HubConnection, HubConnectionBuilder, IHttpConnectionOptions, LogLevel } from "@microsoft/signalr";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  private _connection: HubConnection | null = null;
  private _options: IHttpConnectionOptions = {
    skipNegotiation: true,
    transport: 1,
    accessTokenFactory: () => ''
  };

  ngOnInit() {
    if (!this._connection) {
      this._connection = new HubConnectionBuilder()
        .configureLogging(LogLevel.Error)
        .withUrl(`/hub`, this._options)
        .withAutomaticReconnect({
          nextRetryDelayInMilliseconds: () => 5000
        })
        .build();
    }
  }
}

Exceptions (if any)

⠸ Building...X [ERROR] Could not resolve "url"

    (disabled):node_modules/eventsource/lib/eventsource.js:1:20:
      1 │ var parse = require('url').parse;
        ╵                     ~~~~~

  The package "url" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "https"

    (disabled):node_modules/eventsource/lib/eventsource.js:3:20:
      3 │ var https = require('https');
        ╵                     ~~~~~~~

  The package "https" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "http"

    (disabled):node_modules/eventsource/lib/eventsource.js:4:19:
      4 │ var http = require('http');
        ╵                    ~~~~~~

  The package "http" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "util"

    (disabled):node_modules/eventsource/lib/eventsource.js:5:19:
      5 │ var util = require('util');
        ╵                    ~~~~~~

  The package "util" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] NG9: Property 'title' does not exist on type 'AppComponent'. [plugin angular-compiler]

    src/app/app.component.html:228:20:
      228 │       <h1>Hello, {{ title }}</h1>
          ╵                     ~~~~~

  Error occurs in the template of component AppComponent.

    src/app/app.component.ts:10:15:
      10 │   templateUrl: './app.component.html',
         ╵                ~~~~~~~~~~~~~~~~~~~~~~

.NET Version

8.0.100

Anything else?

IDE: vscode

.NET SDK: Version: 8.0.100 Commit: 57efcf1350 Workload version: 8.0.100-manifests.8d38d0cc

Runtime Environment: OS Name: Windows OS Version: 10.0.19045 OS Platform: Windows RID: win-x64 Base Path: C:\Program Files\dotnet\sdk\8.0.100\

.NET workloads installed: Workload version: 8.0.100-manifests.8d38d0cc There are no installed workloads to display.

Host: Version: 8.0.0 Architecture: x64 Commit: 5535e31a71

.NET SDKs installed: 8.0.100 [C:\Program Files\dotnet\sdk]

.NET runtimes installed: Microsoft.AspNetCore.All 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.24 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.25 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 7.0.14 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 8.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.32 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.10 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.15 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.24 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.25 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 7.0.14 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 8.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 6.0.25 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 7.0.14 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 8.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Other architectures found: x86 [C:\Program Files (x86)\dotnet] registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\x86\InstallLocation]

Environment variables: Not set

global.json file: Not found

Learn more: https://aka.ms/dotnet/info

Download .NET: https://aka.ms/dotnet/download

[BrennanConroy]

Could you give more exact repro instructions? I made a new angular app, added the code you showed, and added "esbuild": "esbuild src/main.ts --bundle --outfile=dist/main.js --loader:.html=text --minify" to package.json. It builds fine.

[ssougnez]

Just run ng build in here: https://stackblitz.com/edit/angular-at-szv4lu

Interesting thing: ng serve actually seems to be working fine. I also found this: https://github.com/evanw/esbuild/issues/1996 The issue might be related to esbuild but when I revert back to 7.0.12, it builds without any issue. Moreover, I tried with different pre-release of the 8 version and it seems that the issue was introduced with version 8.0.0-rc.1.23421.29 as the version before (8.0.0-preview.6.23329.11) seems to be working fine.

[MateuszBogdan]

I have exact same problem. I have pinpointed @microsoft/signalr version 8 to be causing problem. Using previous versions works fine. Have same behavior on esbuild: serve works fine, build crashes. I also tried to upgrade esbuild to newest version but it fails. @BrennanConroy I believe using esbuild in angular is not as simple as you have attempted. You have to edit angular.json file. Here is some additional info: https://angular.io/guide/esbuild#using-the-application-builder

For this kind of a simple app just changing builder line in angular.json to @angular-devkit/build-angular:application should be sufficient.

[ssougnez]

I have exact same problem. I have pinpointed @microsoft/signalr version 8 to be causing problem. Using previous versions works fine. Have same behavior on esbuild: serve works fine, build crashes. I also tried to upgrade esbuild to newest version but it fails. @BrennanConroy I believe using esbuild in angular is not as simple as you have attempted. You have to edit angular.json file. Here is some additional info: https://angular.io/guide/esbuild#using-the-application-builder

For this kind of a simple app just changing builder line in angular.json to @angular-devkit/build-angular:application should be sufficient.

Normally, if he creates his application using angular cli 17, esbuild is enabled by default and he should be able to reproduce the issue without updating the angular.json.

[alexander-kastil]

Same error here ... Strange Fact is that yesterday I upgraded an existing Mico Frontend and every worked fine ... Even tried to scaffold a new project and copied the component implementation and NOT any metadata file. My project also included the @microsoft/signalr package ... downgrade to 7.0.14 solved the issue

[BrennanConroy]

Two workarounds I've come up with so far:

• Add

  "browser": {
  "http": false,
  "https": false,
  "url": false,
  "util": false
  }

  to your package.json

• Change the builder to "builder": "@angular-devkit/build-angular:browser" and "browser": "src/main.ts" to "main": "src/main.ts" in angular.json

Obviously these aren't great. But it should mitigate the problem while I look into why the new esbuild builder in angular 17 isn't working here.

[Squixx]

Two workarounds I've come up with so far:

• Add

"browser": {
    "http": false,
    "https": false,
    "url": false,
    "util": false
  }

to your package.json

• Change the builder to "builder": "@angular-devkit/build-angular:browser" and "browser": "src/main.ts" to "main": "src/main.ts" in angular.json

Obviously these aren't great. But it should mitigate the problem while I look into why the new esbuild builder in angular 17 isn't working here.

Thats not really a workaround though. Thats just falling back to webpack instead of esbuild.

I've tracked it down, and the same issue is there aswell for "microsoft-cognitiveservices-speech-sdk": "1.33.1",

and seems to stem from https-proxy-agent

[pcervera7747]

Same here and we also use vite builder with Angular 17 (builder": "@angular-devkit/build-angular:application") and want to keep them.

With "@microsoft/signalr": "8.0.0" the error cames up
Everything works fine with "@microsoft/signalr": "7.0.14",

And the same as above, ng serve works fine with both versions, only the build fails.

[stealthin]

I've encountered the same problem as well

[simfyz]

I am facing the same issue as well. As of now downgraded to v7

[ssougnez]

@BrennanConroy Hi Brennan,

do you have any news about this?

This seems to be a pretty blocking issue as it simply prevents the migration towards .NET 8.

I know that you provided a workaround using webpack but this is clearly suboptimal as new application created with angular CLI 17 opt for esbuild.

Moreover, every post about ng 17 advice people to start using esbuild instead of webpack (for good reasons).

Any update would be appreciated <3

[BrennanConroy]

No updates. Also, I gave two workarounds, one of which lets you keep using esbuild.

I have no idea how angular build works, but my assumption is that angular isn't reading the package.json "browser" section for projects (like signalr) which bring in other dependencies that aren't used in the browser, so it will end up trying to use those dependencies (eventsource) and errors because it's primarily a node package.

The other problem is that the eventsource package looks a bit unmaintained and has an open issue about making it more friendly when being referenced in a react-native build, which has a similar error about not resolving "url".

[ssougnez]

Oops, sorry, read too fast your workaround post. I'll use this waiting for the final fix. Thanks and good luck :-)

[Julian-B90]

Maybe this is the Problem:

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

▲ [WARNING] Module 'tough-cookie' used by 'node_modules/@microsoft/signalr/dist/esm/DynamicImports.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

▲ [WARNING] Module 'node-fetch' used by 'node_modules/@microsoft/signalr/dist/esm/DynamicImports.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

▲ [WARNING] Module 'fetch-cookie' used by 'node_modules/@microsoft/signalr/dist/esm/DynamicImports.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

▲ [WARNING] Module 'abort-controller' used by 'node_modules/@microsoft/signalr/dist/esm/DynamicImports.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

▲ [WARNING] Module 'ws' used by 'node_modules/@microsoft/signalr/dist/esm/DynamicImports.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

▲ [WARNING] Module 'eventsource' used by 'node_modules/@microsoft/signalr/dist/esm/DynamicImports.js' is not ESM

[turtleseverywhere]

same problem here.. i guess ill be downgrading, version 7.0.12 build fine

[ssougnez]

same problem here.. i guess ill be downgrading, version 7.0.12 build fine

Hi, the solution proposed by @BrennanConroy here worked for me waiting for a better solution.

[robbaman]

No updates. Also, I gave two workarounds, one of which lets you keep using esbuild.

I have no idea how angular build works, but my assumption is that angular isn't reading the package.json "browser" section for projects (like signalr) which bring in other dependencies that aren't used in the browser, so it will end up trying to use those dependencies (eventsource) and errors because it's primarily a node package.

The other problem is that the eventsource package looks a bit unmaintained and has an open issue about making it more friendly when being referenced in a react-native build, which has a similar error about not resolving "url".

I don't really know anything about esbuild or webpack or anything, but which of your solutions does let us keep using esbuild?

[ssougnez]

No updates. Also, I gave two workarounds, one of which lets you keep using esbuild. I have no idea how angular build works, but my assumption is that angular isn't reading the package.json "browser" section for projects (like signalr) which bring in other dependencies that aren't used in the browser, so it will end up trying to use those dependencies (eventsource) and errors because it's primarily a node package. The other problem is that the eventsource package looks a bit unmaintained and has an open issue about making it more friendly when being referenced in a react-native build, which has a similar error about not resolving "url".

I don't really know anything about esbuild or webpack or anything, but which of your solutions does let us keep using esbuild?

The first one, where you add

"browser": {
    "http": false,
    "https": false,
    "url": false,
    "util": false
  }

in you package.json

[EricSch]

I think it has to do with Node.js and the typings for Node.js Webpack included earlier node.js, the modules for url, http, ... are declared there and were used during the build.

As Angular is a client only framework, there should be no references to Node.js in any way, so they removed them from Webpack. Angular also doesn't include the typings for node.js anymore.

As you see here SignalR package, the node typings are included.

I didn't have time to test different scenarios. But I think, removing @types/node from the SignalR client packages would solve it. Don't know if there is anything used from node.js.

UPDATE: After checking some code in the client package, I found many references to node.js. Problem seems to be more that in the SignalR client package every scenario is included in the same package / code base. So, dropping Node.js references will be difficult.

[Mds92]

I'm using angular 17 I am facing the same issue as well. downgraded to v7 Waiting for a fix

[rishabhbeni]

So there is no fix for this yet as I am facing the same?

[gabynevada]

@rishabhbeni I just downgraded to V7 until it's fixed. Haven't had any problems on functionality.

[ssougnez]

Or you can use the workaround proposed here: https://github.com/dotnet/aspnetcore/issues/52082#issuecomment-1819753030 which works as expected (the few lines to add to the package.json file).

[gabynevada]

Or you can use the workaround proposed here: https://github.com/dotnet/aspnetcore/issues/52082#issuecomment-1819753030 which works as expected (the few lines to add to the package.json file).

Isn't this workaround just going back to the webpack builder? If it is then you loose all the benefits and performance improvements of Esbuild

[ssougnez]

Nop, you're referring to the second workaround. The first one simply adds some code in the package.json while keeping esbuild.

[M0ns1gn0r]

Why https://github.com/dotnet/aspnetcore/issues/52192 was closed as completed without linking to this issue?

[jzs11]

Any updates?

[Jonesmann1337]

Same issue here. Downgrading to signalr@7.0.14 solved it for me. This is not a solution, but just a workaround ;-) Waiting for a fix...

[JoseSolorzanoC]

Downgrading to signalr@7.0.14 also solved it for me. Waiting for a fix...

[daniel-agouveia]

Downgrading to signalr@v7.0.0 didn't work for me

[IdanSysmetricAcount]

Downgrading to signalr@7.0.14 also solved it for me. Waiting for a fix...

[andygviola]

Downgrading to signalr@7.0.14 also solved it for me. Waiting for a fix...

[McGiogen]

Thanks for the first workaround, it works, but... I think that importing @microsoft/signalr we are importing many useless files for a client. We should import /dist/browser/signalr.js but it has no types and I think there is no simple way to import it in Angular application. Microsoft should create a easy-to-use esm client file instead of the global object actually available (which feels like from prehistory).

[sommmen]

Two workarounds I've come up with so far:

* Add

"browser": {
    "http": false,
    "https": false,
    "url": false,
    "util": false
  }

to your package.json

* Change the builder to `"builder": "@angular-devkit/build-angular:browser"` and `"browser": "src/main.ts"` to `"main": "src/main.ts"` in angular.json

Obviously these aren't great. But it should mitigate the problem while I look into why the new esbuild builder in angular 17 isn't working here.

Two workarounds I've come up with so far:

* Add

"browser": {
    "http": false,
    "https": false,
    "url": false,
    "util": false
  }

to your package.json

* Change the builder to `"builder": "@angular-devkit/build-angular:browser"` and `"browser": "src/main.ts"` to `"main": "src/main.ts"` in angular.json

Obviously these aren't great. But it should mitigate the problem while I look into why the new esbuild builder in angular 17 isn't working here.

I also had to add 'net' from dep 'fetch-cookie' to this, and then i could build without issue. the full output is:

"browser": {
  "http": false,
  "https": false,
  "url": false,
  "util": false,
  "net": false
}

[omprakashgupta]

I am facing the same issue. I have downgraded the @microsoft/signalr version to [7.0.14]. Now I am able to build the application.

[etiennelepagel]

Same issue here, waiting for a fix.

[ilbeyataberkcan]

Same here. The issue should be handled ASAP since v8 adds very important features such as automatic re-connection.

[eluchsinger]

Do we have the dedicated changelogs for SignalR 8 somewhere?

[lluthus]

I have Downgraded the version as well. Any updates ?

[kroissm]

Any updates on this issue?

[SoulOnFire]

Same here... keeping 7.0.14... waiting for updates!

[juanchavezlive]

Same problem here :(

[RenanBezerraEnes]

I am facing the same problem...

[Adrii77]

Same here. Stuck in 7.0.14

[alkampfergit]

Same here, we are stuck in 7.0.14

[lwestfall]

Respectfully, folks - 35 of us are subscribed and get a notification each time someone says "same here" which doesn't actually give any sense of priority to the team on this issue. We're all in the same boat and are stuck in 7.0.14 - instead of commenting to let everyone know, the best thing you can do is upvote the first comment

[ssougnez]

Respectfully, folks - 35 of us are subscribed and get a notification each time someone says "same here" which doesn't actually give any sense of priority to the team on this issue. We're all in the same boat and are stuck in 7.0.14 - instead of commenting to let everyone know, the best thing you can do is upvote the first comment

Moreover, as mentioned multiple time, there is a workaround involving 5 lines of code in the packages.json that fix the issue. I'm using it for months in production and there is no problem with it, so I don't get why everyone chooses to ignore this solution...

[YunusOzdemirr]

use this package for your angular project

npm i @microsoft/signalr@7.0.14

[jjmhalew]

I was having the same issue, but finally I found another way to fix it.

In angular.json, under architect build options (where "browser" value is defined), add following code:

"externalDependencies": [
  "http",
  "https",
  "url",
  "util",
  "net"
],

This should fix the errors. However, you might still have some commonJsDependencies warnings. To fix this, add:

"allowedCommonJsDependencies": [
  "tough-cookie",
  "node-fetch",
  "fetch-cookie",
  "abort-controller",
  "ws",
  "eventsource"
],

[danipavic]

Encountered this issue:

"@microsoft/signalr": "^8.0.0", "@angular/core": "^17.3.8"

I have downgraded for now, but should really be fixed.