Closed BenAzlay closed 4 months ago
@BenAzlay please have a look at our react demo project that utilizing craco - https://github.com/blocknative/react-demo
@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:
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,
});
@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
@Adamj1232 initially I followed the example without the ?.
. The example shows nextjs using page routing instead of app routing.
downgrading from 2.10.12 to 2.8.5 doesn't throw the error.
@ayepRahman is that the max version before errors present?
@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:
@BenAzlay what version of node? Are you using npm, yarn?
@Adamj1232 I'm using npm, and Node v18.17.1 (as mentioned in my initial comment)
I am experiencing the same problem - it works fine, but throws the error in the console.
@BenAzlay which wallets do you have added to your browser?
There is a fix for this available at the latest alpha version of the injected module. Thank you for reporting!
There is a fix for this available at the latest alpha version of the injected module. Thank you for reporting!
I confirm this fixed it (updating @web3-onboard/injected-wallets to version 2.10.14-alpha.1). Thank you so much!
Current Behavior
The dApp crashes. The log output is below.
Expected Behavior
No response
Steps To Reproduce
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
Anything else?
This is my craco.config.js:
Sanity Check