Using Irys With npx create-react-app

ℹ️

If you're using React with Vite, polyfills are handled differently. You'll need to follow this guide instead.

Irys 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 Irys 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 irys-react
cd irys-react
npx create-react-app .

Install the Irys SDK and ethers:

npm install @irys-network/bundler-client ethers@5

In your App.js file write an initialization function that sets up a WebIrys object. The following code shows how to use ethers5, if you're using a different provider make sure to specify it when creating the wallet.

import { providers } from "ethers";
import { WebIrys } from "@irys-network/bundler-client";
 
function App() {
	const initialiseIrys = async () => {
		await window.ethereum.enable();
		const provider = new providers.Web3Provider(window.ethereum);
		const wallet = { name: "ethersv5", provider: provider };
		const network = "testnet"; 
		const token = "ethereum";
		const webIrys = new WebIrys({ network, token, wallet });
		await webIrys.ready();
		return webIrys;
	};
 
	return <div className="App">Irys Test</div>;
}
 
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 || {};
	config.resolve.alias = { ...(config?.resolve?.alias ?? {}), stream: "stream-browserify" };
	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 React server and restart it with npm run start you should be good to go.

Querying Using Vite