Webpack/polyfill Error after installing pact-lang-api - pact-lang

Question

While trying to connect a react frontend, which was just created using create-react-app, I got this error message when running npm run start after importing pact-lang-api to the app:
ERROR in ./node_modules/eventsource/lib/eventsource.js 5:12-28 Module not found: Error: Can't resolve 'https' in '/src/node_modules/eventsource/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }
ERROR in ./node_modules/eventsource/lib/eventsource.js 7:11-26 Module not found: Error: Can't resolve 'http' in '/src/node_modules/eventsource/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }
webpack compiled with 2 errors and 2 warnings
My dependencies look like this:
{
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#mui/material": "^5.8.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"pact-lang-api": "^4.3.3",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "4.0.3",
"web-vitals": "^2.1.4"
}
How would I work through this?
Thanks in advance for any help!

Answer 1

The error says to install stream-http and https-browserify.
Try
npm i stream-http https-browserify

Answer 2

Just fixed this issue myself by following along with the solution at https://alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5.
Note that the article is targeted at fixing this issue created by web3.js package, not pact-lang-api. For pact-lang-api, you will also need to add the url and util packages so your final config-overrides file will look like...
const webpack = require("webpack");
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
assert: require.resolve("assert"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify"),
url: require.resolve("url"),
util: require.resolve("util"),
});
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
}),
]);
return config;
};
The solution in the article does not include url: require.resolve("url") or util: require.resolve("util"), but you will need both.