dotnet / dotnet/aspnetcore

SignalR npm package not able to be bundled using `esbuild`

Open
#47,674 13 comments 9 reactions 0 assignees View on GitHub
area-signalr
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 10h
Merged PRs (30d)
281

Description

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Describe the bug

Hi,
I'm using the npm package `@microsoft/signalr` with version `7.0.4`. I'm using `esbuild` for bundeling, however, it does not correctly resolve some dependencies, like `ws`.

This is due [those hacks](https://github.com/search?q=repo%3Adotnet%2Faspnetcore%20__webpack_require__&type=code):
```ts
// In order to ignore the dynamic require in webpack builds we need to do this magic
// @ts-ignore: TS doesn't know about these names
const requireFunc = typeof __webpack_require__ === "function" ? __non_webpack_require__ : require;
webSocketModule = requireFunc("ws");
eventSourceModule = requireFunc("eventsource");
```

I don't think this is an issue of `esbuild`, since it believes that this is a dynamic require. Can we somehow fix this?

I confirmed that this is the issue, by patching the lib to use plain `require` instead of the `requireFunc`, then everything works correctly.

### Expected Behavior

`ws` is resolved correctly when using the `bundle` option of `esbuild`.

### Steps To Reproduce

https://github.com/hrueger/signalr-esbuild-issue

1. `yarn install`
1. `yarn build`
1. See `__webpack_require__` is still in `dist/bundle.js` instead of the `ws` module embedded in the bundle.

### Exceptions (if any)

_No response_

### .NET Version

n/a

### Anything else?

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked signalr-esbuild-issue reproduction by running yarn install and yarn build, then inspect dist/bundle.js for the unresolved __webpack_require__. Read the SignalR npm source around the requireFunc logic for ws and eventsource. Done means the bundle resolves ws correctly and no longer leaves that dynamic require in the output.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js, typescript, webpack
Domain
build-system, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.