Configure react/webpack to ignore `http2`

[marikaner]

Hi 👋,

I am working on a library that is mainly used in node, but is also useful in browser applications (in part).
To test browser compatibility we have two test apps, one in angular one in react.
We recently added a dependency that uses http2 and dns, but can basically be ignored in browsers.

I was able to correctly configure webpack 5 and 6 with angular, while for webpack 5, I had to add this to the package.json:

"browser": {
  "http2": false,
  "dns": false
}

Adding it to a custom webpack config did not work (as opposed to webpack 6).

React seems to use webpack 5. Adding a browser configuration to the package.json did not work, neither did ejecting the react config and extending the webpack config.
The default webpack config provided by react actually contains http2: 'empty`, however I always get this error:

Failed to compile.

./node_modules/http2-wrapper/source/index.js
Cannot find module: 'http2'. Make sure this package is installed.

How can I disable the two node.js modules?

[marikaner]

I now spent many hours investigating this and found that "browsers" is looked at because the aliasFields is set to ['browsers'] (as documented in the webpack docs). I ejected the webpack config and added this configuration, but still, this does not work with react. Seems like react is doing something, that overwrites the default behavior of webpack somehow.

Again, after debugging this for a very long time, I found that while the "browser" config is loaded into webpack initially, by the time webpack is resolving the packages mentioned above it has disappeared for some reason. Not sure if this is the problem though.

[marikaner]

Anyone?

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.