Skip to main content

Bundlr + React

Bundlr is fully compatible with React, however, if you’re using npx create-react-app to create your project, you will need to do some additional configuration and installation. This guide details how to create a new React project and add Bundlr support, if you already have a React project open, free to skip down a few steps.

Create a new directory for your project, cd into it, and create your React project:

mkdir bundlr-react
cd bundlr-react
npx create-react-app .

Install the Bundlr library and ethers (for interacting with the blockchain):

npm install @bundlr-network/client ethers

There are currently two versions of ethers.js in use, if you're using the v5 release, change you App.js file to:

import { providers } from "ethers";
import { WebBundlr } from "@bundlr-network/client";

function App() {
const initialiseBundlr = async () => {
await window.ethereum.enable();

const provider = new providers.Web3Provider(window.ethereum);
await provider._ready();

const bundlr = new WebBundlr("", "matic", provider);
await bundlr.ready();

return bundlr; // done!

return <div className="App">Bundlr Test</div>;

export default App;

If you're using the v6 beta version, the API has changed and you'll need to use the following code instead.

import { ethers } from "ethers";
import { WebBundlr } from "@bundlr-network/client";

// This code has been updated for ethers.js v6
function App() {
const initialiseBundlr = async () => {
// Connect to the MetaMask EIP-1193 object.
// provider used for writing to the blockchain
const provider = new ethers.BrowserProvider(window.ethereum);
// signer used for reading from the blockchain
const signer = await provider.getSigner();

// link the signer to the provider
provider.getSigner = () => signer;

// create the WebBundlr object
const bundlr = new WebBundlr("", "matic", provider);
await bundlr.ready();
console.log("bundlr=", bundlr);

return bundlr; // done

return (
<div className="App">
<button type="button" onClick={initialiseBundlr}>
Initialize Bundlr

export default App;

Viewing that page, you'll get a bunch of errors saying BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

To fix this you'll need to include NodeJS polyfills which are no longer included by default.

Install first react-app-rewired, a package that allows for editing of the webpack config file to fix polyfill issue. Then install the missing dependencies.

npm install react-app-rewired
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
npm install browserify-zlib path-browserify path

At the root level of your project, create a new file called config-overrides.js and paste the following in:

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"),
zlib: require.resolve("browserify-zlib"),
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
return config;

Override package.json to include the new webpack configuration. Look for this code block

 "scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

and replace it with this block:

"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"

Quit out of the React server and restart it with npm run start you should be good to go.