CODEWITHSUNDEEP
pact-langkadena
mike sutanto
mike sutanto

Reputation: 58

Webpack/polyfill Error after installing pact-lang-api

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!

Upvotes: 1

Views: 231

Answers (3)

Kitty Kad
Kitty Kad

Reputation: 444

The solution is to install the files it says, however for how to use the files for code made with create-react-app is not in the message.

You will need to modify webpack by using a helper library.

  1. Install the libraries that it says
npm install stream-http
npm install https-browserify
  1. Install react-app-rewired (e.g. npm install react-app-rewired)
  2. Create config-overrides.js in your root folder (not src folder)
  3. Add this to it
module.exports = function override(config, env) {
  config.resolve.fallback = config.resolve.fallback ?? {};
  config.resolve.fallback.http = require.resolve("stream-http");
  config.resolve.fallback.https = require.resolve("https-browserify");
  return config;
};
  1. In package.json update your scripts to use react-app-rewired instead of react-scripts. E.g.
    "start": "react-app-rewired start",
    "build": "react-app-rewired build"

Upvotes: 1

Kev-O
Kev-O

Reputation: 11

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.

Upvotes: 0

georgep
georgep

Reputation: 741

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

Try

npm i stream-http https-browserify

Upvotes: 1

Related Questions