injectedModule bug: "Cannot assign to read only property 'request' of object '[object Object]'"

[BenAzlay]

Current Behavior

The dApp crashes. The log output is below.

Expected Behavior

No response

Steps To Reproduce

1. I am using react-create-app with Craco
2. Injected is the only module being used

import { init, useConnectWallet } from "@web3-onboard/react";
import injectedModule from '@web3-onboard/injected-wallets';

const apiKey = process.env.REACT_APP_BLOCKNATIVE_KEY;

const injected = injectedModule();

init({
  apiKey,
  wallets: [injected],
  chains: [
    {
      id: 1,
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: CONSTANTS.RPC_URLS[1],
    },
    {
      id: 8453,
      token: 'ETH',
      label: 'Base',
      rpcUrl: CONSTANTS.RPC_URLS[8453],
    }
  ]
});

What package is effected by this issue?

@web3-onboard/injected

Is this a build or a runtime issue?

Runtime

Package Version

2.10.12

Node Version

18.17.1

What browsers are you seeing the problem on?

Chrome

Relevant log output

Cannot assign to read only property 'request' of object '[object Object]'
TypeError: Cannot assign to read only property 'request' of object '[object Object]'
    at createEIP1193Provider (http://localhost:3000/static/js/bundle.js:337890:20)
    at http://localhost:3000/static/js/bundle.js:349171:99
    at checkFor6963Providers (http://localhost:3000/static/js/bundle.js:349178:10)
    at injected (http://localhost:3000/static/js/bundle.js:349186:86)
    at ./src/config/Layout/index.js (http://localhost:3000/static/js/bundle.js:11284:93)
    at options.factory (http://localhost:3000/static/js/bundle.js:370923:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:370311:33)
    at fn (http://localhost:3000/static/js/bundle.js:370580:21)
    at ./src/config/App.js (http://localhost:3000/static/js/bundle.js:10770:65)
    at options.factory (http://localhost:3000/static/js/bundle.js:370923:31)

Anything else?

This is my craco.config.js:

const webpack = require('webpack')

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          path: require.resolve('path-browserify')
        },
        alias: {
          assert: 'assert',
          buffer: 'buffer',
          crypto: 'crypto-browserify',
          http: 'stream-http',
          https: 'https-browserify',
          os: 'os-browserify/browser',
          process: 'process/browser',
          stream: 'stream-browserify',
          util: 'util'
        }
      },
      experiments: {
        asyncWebAssembly: true
      },
      plugins: [
        new webpack.ProvidePlugin({
          process: 'process/browser',
          Buffer: ['buffer', 'Buffer']
        })
      ]
    }
  }
}

Sanity Check

• If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.

[Adamj1232]

@BenAzlay please have a look at our react demo project that utilizing craco - https://github.com/blocknative/react-demo

[BenAzlay]

@Adamj1232 Your react demo uses React App Rewired and not Craco. Nevertheless I tried replacing Craco with React App React on my dApp and now the behavior is as follows:

1. The dApp crashes for a split second with the "Cannot assign to read only property 'request' of object '[object Object]'" error before it goes back to normal
2. That error still appears in the console

[ayepRahman]

Same here running a boilerplate nextjs running with some issue

"use client";

import { URLS } from "@/constants/urls";
import type { Chain, ChainWithDecimalId } from "@web3-onboard/common";
import injectedModule from "@web3-onboard/injected-wallets";
import { init } from "@web3-onboard/react";

const chains: (Chain | ChainWithDecimalId)[] = [
	{
		id: 1,
		token: "ETH",
		label: "Ethereum Mainnet",
		rpcUrl: URLS.mainnetRPCUrl,
	},
	{
		id: 11155111,
		token: "sETH",
		label: "Ethereum Sepolia",
		rpcUrl: URLS.sepoliaRPCUrl,
	},
];

const injected = injectedModule?.();

const wallets = [injected];

export const web3Onboard = init({
	wallets,
	chains,
});

[Adamj1232]

@BenAzlay ah you are correct, we used to have a CRACO application but we did update to rewired on the react-demo project. If you look at the config-overrides here https://github.com/blocknative/react-demo/blob/master/config-overrides.js that should get your app up an running.

@ayepRahman Im not sure why you have a ?. there but please also have a look at the react project for proper initialization or checkout our examples folder - https://github.com/blocknative/web3-onboard/tree/develop/examples

[ayepRahman]

@Adamj1232 initially I followed the example without the ?.. The example shows nextjs using page routing instead of app routing.

[ayepRahman]

downgrading from 2.10.12 to 2.8.5 doesn't throw the error.

[Adamj1232]

@ayepRahman is that the max version before errors present?

[BenAzlay]

@Adamj1232 I am using the exact same config-overrides.js as you. Here is my services.js:

import { init } from '@web3-onboard/react'
import injectedModule from '@web3-onboard/injected-wallets'
import walletConnectModule from '@web3-onboard/walletconnect'
import coinbaseModule from '@web3-onboard/coinbase'
import gnosisModule from '@web3-onboard/gnosis'
import metamaskModule from '@web3-onboard/metamask'
import { CONSTANTS } from '../utils/constants'

const apiKey = process.env.REACT_APP_BLOCKNATIVE_KEY;

const injected = injectedModule();

const coinbase = coinbaseModule();

const walletConnect = walletConnectModule({
    projectId: process.env.REACT_APP_WALLETCONNECT_PROJECT_ID,
    // dappUrl: 'https://reactdemo.blocknative.com/'
});

const gnosis = gnosisModule()
const metamask = metamaskModule({
    options: {
        extensionOnly: false,
        i18nOptions: {
            enabled: true
        },
        dappMetadata: {
            name: 'Web3Onboard React Demo'
        }
    }
})

export const initWeb3Onboard = init({
    connect: {
        autoConnectAllPreviousWallet: true
    },
    wallets: [
        metamask,
        injected,
        walletConnect,
        coinbase,
        gnosis,
    ],
    chains: [
        {
            id: 1,
            token: 'ETH',
            label: 'Ethereum',
            rpcUrl: CONSTANTS.RPC_URLS[1],
        },
        {
            id: 8453,
            token: 'ETH',
            label: 'Base',
            rpcUrl: CONSTANTS.RPC_URLS[8453]
        },
    ],
    appMetadata: {
        name: 'My dApp Name',
        description: 'My dApp description',
        recommendedInjectedWallets: [
            { name: 'Coinbase', url: 'https://wallet.coinbase.com/' },
            { name: 'MetaMask', url: 'https://metamask.io' }
        ],
    },
    accountCenter: {
        desktop: {
            enabled: true,
            position: 'topRight',
        },
        mobile: {
            enabled: true,
            position: 'topRight'
        }
    },
    apiKey,
    theme: 'dark'
})

Then in my Layout/index.js I'm using init like this:

  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();

  const [web3Onboard, setWeb3Onboard] = useState(null);

  useEffect(() => {
    setWeb3Onboard(initWeb3Onboard)
  }, []);

  const onClickConnect = () => {
    if (wallet) disconnect(wallet);
    else {
      connect();
    }
  }

Again, now the dApp doesn't crash anymore, and connection with injected wallet works as well, but the error is still in the console:

[Adamj1232]

@BenAzlay what version of node? Are you using npm, yarn?

[BenAzlay]

@Adamj1232 I'm using npm, and Node v18.17.1 (as mentioned in my initial comment)

[Vitomir2]

I am experiencing the same problem - it works fine, but throws the error in the console.