When building code with webpack, it treats electron-renderer code (mostly React components) as browser code by the above exports entry.
This is the problem, since the content of ws/browser.js is
'use strict';
module.exports = function () {
throw new Error(
'ws does not work in the browser. Browser clients must use the native ' +
'WebSocket object'
);
};
So when you try to instantiate `WebSocket`, it immediately throws.
## Solutions to the above issues
1. Remove `ws` from `packages/gui` by `npm un ws -w @chia-network/gui` then re-add `ws` by `npm i ws -w @chia-network/gui`. After the re-installation, run `npm audit fix` to upgrade `ws` to vuln-free version.
2. Add the below entry to `packages/gui/webpack.react.babel.ts`
exports.module = {
...,
resolve: {
alias: {
ws: require.resolve('ws'), // This will be .../node_modules/ws/index.js
},
},
...
};
This PR replaces https://github.com/Chia-Network/chia-blockchain-gui/pull/2413
Why need replacing? Because
packages/gui/node_modules/ws
remains8.14.1
inpackage-lock.json
and vulnerability still opens.ws@8.17.1
doesn't work withpackages/gui
since it added a conditonal exports to its ownpackage.json
like below.When building code with
webpack
, it treats electron-renderer code (mostly React components) as browser code by the above exports entry. This is the problem, since the content ofws/browser.js
ismodule.exports = function () { throw new Error( 'ws does not work in the browser. Browser clients must use the native ' + 'WebSocket object' ); };
exports.module = { ..., resolve: { alias: { ws: require.resolve('ws'), // This will be
.../node_modules/ws/index.js
}, }, ... };