Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
ssougnez opened this issue Nov 15, 2023 · 61 comments
Closed
1 task done
Labels
area-signalr Includes: SignalR clients and servers
Milestone

Comments

@ssougnez
Copy link

ssougnez commented Nov 15, 2023

Is there an existing issue for this?

  • 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

@dotnet-issue-labeler dotnet-issue-labeler bot added the area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates label Nov 15, 2023
@ssougnez ssougnez changed the title [Angular/es-build/signalR 8]: The package "url" wasn't found on the file system but is built into node signalr 8 / Angular: The package "url" wasn't found on the file system but is built into node Nov 17, 2023
@BrennanConroy
Copy link
Member

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
Copy link
Author

ssougnez commented Nov 17, 2023

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: evanw/esbuild#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
Copy link

MateuszBogdan commented Nov 18, 2023

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
Copy link
Author

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
Copy link

alexander-kastil commented Nov 19, 2023

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
Copy link
Member

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.

@BrennanConroy BrennanConroy added area-signalr Includes: SignalR clients and servers and removed area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates labels Nov 20, 2023
@Squixx
Copy link

Squixx commented Nov 22, 2023

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
Copy link

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
Copy link

I've encountered the same problem as well

@simfyz
Copy link

simfyz commented Nov 27, 2023

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

@ssougnez
Copy link
Author

@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
Copy link
Member

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
Copy link
Author

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

@Julian-B90
Copy link

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
Copy link

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

@ssougnez
Copy link
Author

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
Copy link

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
Copy link
Author

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

lwestfall added a commit to lwestfall/CitrusBookClub that referenced this issue Dec 31, 2023
lrydzkowski added a commit to lrydzkowski/ng-experiment that referenced this issue Jan 2, 2024
@EricSch
Copy link

EricSch commented Jan 4, 2024

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
Copy link

Mds92 commented Jan 15, 2024

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

@rishabhbeni
Copy link

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

@gabynevada
Copy link

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

@ssougnez
Copy link
Author

ssougnez commented Feb 1, 2024

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

@SoulOnFire
Copy link

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

@juanchavezlive
Copy link

Same problem here :(

@RenanBezerraEnes
Copy link

RenanBezerraEnes commented Mar 18, 2024

I am facing the same problem...

@Adrii77
Copy link

Adrii77 commented Mar 18, 2024

Same here. Stuck in 7.0.14

@alkampfergit
Copy link

Same here, we are stuck in 7.0.14

@lwestfall
Copy link

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
Copy link
Author

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
Copy link

YunusOzdemirr commented Apr 5, 2024

use this package for your angular project

npm i @microsoft/signalr@7.0.14

@jjmhalew
Copy link

jjmhalew commented May 4, 2024

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
Copy link

Encountered this issue:

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

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

@alainkaiser
Copy link

Still the same issue. Applied the fix from @jjmhalew, this works fine on my end.

My versions:

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

@KarkanitsaD
Copy link

The solution from @jjmhalew works fine. Thank you!

@hatsantos
Copy link

I was having the same problem in a Angular 18 application with SignalR 8.
I opted for the solution to add the browser config in the packaged.json:

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

Although I don't understand exactly what this does or how it resolves the issue.

I think the ideal solution would something similar to @McGiogen suggestion.

@steppe87
Copy link

Same issue on my site! => Downgrade to 7.0.14 and waiting for a fix!

Should be fixed, after this issue is more than half a year old.

@WillooWisp
Copy link

WillooWisp commented Jun 18, 2024 via email

@BrennanConroy
Copy link
Member

Sorry this took so long, 8.0.7 (out now) should contain a fix for this so any workarounds listed above can now be removed.

@CaringDev
Copy link

[...] so any workarounds listed above can now be removed.

Can confirm that the package.json "browser: { ... }" workaround can be removed.

@EricSch
Copy link

EricSch commented Jul 10, 2024

Sorry this took so long, 8.0.7 (out now) should contain a fix for this so any workarounds listed above can now be removed.

Thank you!
Any hints, what was fixed? or which pull request? Didn't find anything specific.

@reduckted
Copy link
Contributor

Any hints, what was fixed? or which pull request? Didn't find anything specific.

From looking at the files changed between v8.0.6 and v8.0.7, it looks like it was #55229.

@GChuf
Copy link

GChuf commented Jul 29, 2024

8.0.7 resolves the issue for me.

@simfyz
Copy link

simfyz commented Aug 7, 2024

Updated and verified. Fixed with v8.0.7

engrkwakwak pushed a commit to engrkwakwak/ChatRoom.Frontend that referenced this issue Aug 14, 2024
**Configure production build environment**
- Downgraded microsoft/signalr from v8 to v7.0.14 to fix [Build Error](dotnet/aspnetcore#52082).
- Increase production budget size to 3mb.

Related work items: #32507
@BrennanConroy BrennanConroy added this to the 8.0.7 milestone Oct 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-signalr Includes: SignalR clients and servers
Projects
None yet
Development

No branches or pull requests