TypeError: Cannot read properties of undefined (reading 'Contract')
Module.
lottery-react/src/lottery.js:9
I get this error when I serve and go to the browser
My code
import web3 from "web3";
const address = '0x------------------------------';
const abi = [{"constant":true,"inputs":[],"name":"manager","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"pickWinner","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getPlayers","outputs":[{"name":"","type":"address[]"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"enter","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"players","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"}];
function test () {
console.log(web3.eth); // throws undefined
};
export default test;
I fixed it by making a minor change
update web3.eth
to new web3().eth
Instead of
const web3 = require('web3');
I needed to do this:
const Web3 = require('web3');
const web3 = new Web3();
web3.eth is undefined. Try fixing that first.
You haven't initialized your contract
kindly do it and then call your smart contract method
var contract = await new web3.eth.Contract(abi, address);
Related
i just upgrade svelte migration route then create +page.js file this script
export async function load({ page }) {
var songId = page.params.songId;
const itunesSearched = await fetch(
`https://itunes.apple.com/search?term=${songId}&entity=song`
);
var res = await itunesSearched.json();
var songResults = res.results[0];
return {songResults}
}
Error below
Cannot read properties of undefined (reading 'params')
TypeError: Cannot read properties of undefined (reading 'params')
at load (/src/routes/[searched]/[songId]/+page.js:2:22)
You can see the interface of the event data in the docs. It has no page property; params are a direct property of the event, so you should be able to just destructure that:
export async function load({ params }) { ...
I have this code:
export default function TestingComponent(firebaseApp) {
firebase = firebaseApp;
db = getFirestore();
auth = getAuth();
console.log(db);
// Vx1JSJHadTWEyXloDVhY2GYd3e03
console.log("getting data...")
const [value, loading, error] = useDocumentData(doc(db, "users", "Vx1JSJHadTWEyXloDVhY2GYd3e03"));
all things are defined, db, firebase & auth.
The document path is correct, checked multiple times but I'm still getting an error:
ref.current.onSnapshot is not a function
more particularly:
am I doing something wrong? this follows the documentation of
Ended up being the wrong versrion of react-firebase-hooks, to have it work for the newest firebase SDK, use this
const { value: instanceData, loading: isLoading } = useAsync(async () => {
instances = [];
resource_name = "hello"
return {instances, resource_name}l
}, []);
const instances = instanceData.instances; // undefined!
const resource_name = instanceData.resource_name; // undefined!
I don't understand why the variables I'm getting returned are undefined ?
I don't know which library are you using and why don't you use normal useEffect for that but I assume useAsync is async so it has to wait for some data to get and that is why instanceData.instances is undefined because that data didn't come yet. The fastest fix would be just adding question mark to your const values:
const instances = instanceData?.instances;
const resource_name = instanceData?.resource_name;
But later on in the jsx you have to also check if they are not undefined.
This is my solution but because I don't know what exactly happens by useAsync I am not sure if that would work.
I am trying out React Query for the first time and I wrote this:
export function Component(): JSX.Element {
const queryClient = new QueryClient()
const { data } = useQuery<DataType>({
queryKey: "myKey",
queryFn: () => ....,
})
const sameData: DataType| undefined = queryClient.getQueryData("myKey")
return (
<>
{console.log(data)}
{console.log(sameData)}
<p>Loaded, see console for values.</p>
</>
)
}
The data object is created as expected, but I cannot seem to make sameData return anything other than undefined. I know this means that React Query isn't finding my key. Does anyone have any ideas on how to fix this?
You’re creating a new QueryClient in each render, so you’ll get a new cache. Have a look at the example on the front page of the docs: https://react-query.tanstack.com/overview
You need a stable queryClient, and put it in a QueryClientProvider
like the above answer explained
const queryClient = new QueryClient()
will create a new instance on every render
the provided useQueryClient() hook returns the current instance
const queryClient = useQueryClient()
I'm integrating WalletConnect in React DApp but am getting
this.send is not a function
I've identified that the issue is with WalletConnectProvider but i've followed the same steps that are mentioned in their documentation.
Please review my code and let me know how to fix this issue. Thanks.
import WalletConnectProvider from '#walletconnect/web3-provider';
import config from './config';
import Web3 from 'web3';
export const walletConnect = async (setAddr) => {
// Create WalletConnect Provider
const provider = new WalletConnectProvider({
infuraId: config.tokenContract.infuraKey, // Required
});
// Enable session (triggers QR Code modal)
await provider.enable();
console.log('provider', provider);
if (provider.connected) {
console.log('wallet connect address', provider.accounts[0]);
setAddr(provider.accounts[0]);
}
// Create Web3
const web3 = new Web3(provider);
console.log('web3', web3);
const _contract = new web3.eth.Contract(
config.tokenContract.contractABI,
config.tokenContract.contractAddress
);
const data = await _contract.methods.hatchNest().encodeABI();
const gasPrice = 20000000000;
const gasLimit = 90000;
const tx = {
from: '0xFF12586A1eCf65b56d828712A8d4B48D1CEC8962',
to: config.tokenContract.contractAddress,
data: data,
gasPrice: web3.utils.toHex(gasPrice),
gasLimit: web3.utils.toHex(gasLimit),
};
// Send Transaction
const txHash = await web3.eth.sendTransaction(tx);
console.log('sendTransaction', txHash);
};
It is a known bug in web3.js 1.3.x
https://github.com/ethereum/web3.js/issues/3790
Downgrade for web3.js 1.2.x.