I would like to do Openzeppelin Relayer via Thridweb.
export default function Home() {
const {contract} = useContract("0xB86aA3531d37A18f498cFfe1b47F819510DA3D4A");
console.log( contract: ${contract} )
As a result, console.log shows "Contract: undefined". I have no idea what's wrong with it
Please help me, thank you
Error on Inspect
JavaScript
Please help me to finding the solution of Thirdweb.
Related
Code is like here.
import { useState } from 'react';
import { Steps } from 'intro.js-react';
export default function Dashboard() {
const [stepEnabled, setStepEnabled] = useState(true);
const steps = [
{
intro: 'Welcome to WorkStats!'
}
];
const onExit = () => {
setStepEnabled(false);
};
return (
<main>
<Steps
enabled={stepEnabled}
steps={steps}
initialStep={0}
onExit={onExit}
/>
<div>Test</div>
</main>
);
}
An error is like this.
This error is similar to this issue NextJs: Element is not Defined when using Intro.js but it did not work for me.
As you can see in the attached screenshot, the error is saying that it is because an element is not defined in the Object.<anonymous>.
This Object.<anonymous> is <Steps>. Comment this out, because if you comment it out, the error goes away. And <Steps> is imported from intro.js-react. And intro.js-react is indeed already installed, as shown in the attached third screenshot below.
Let's look a little more inside the node_module as mentioned in the error message. In the attached third screenshot, if you look at line 310, character 110, you will see that there is indeed an Element. According to the attached first error message, this is not defined. I do not know why this is.
The step.element in this <Steps> is not isRequired. I don't understand why they say that Element is not defined.
By the way, I get this error when I reload, but once I comment it out and reload it again, it displays correctly. If I uncomment out the commented out section again after this, the intro.js-react pops up correctly. I think this is another hint, but I don't know why.
I updated the next day.
Modified code as below, which resolved the original error.
import { useState } from 'react';
import dynamic from 'next/dynamic';
// import { Steps } from 'intro.js-react';
// Newly added
// #ts-ignore
const Steps = dynamic(() => import('intro.js-react').then((mod) => mod.Steps), {
ssr: false
});
export default function Dashboard() {
const [stepEnabled, setStepEnabled] = useState(true);
const steps = [
{
intro: 'Welcome to WorkStats!'
}
];
const onExit = () => {
setStepEnabled(false);
};
return (
<main>
<Steps
// #ts-ignore
enabled={stepEnabled}
steps={steps}
initialStep={0}
onExit={onExit}
/>
<div>Test</div>
</main>
);
}
Then the original error "Element is not defined" was gone but the problem still existed. The problem is like this.
https://www.loom.com/share/22a307b2221f42d5b3548647f5da23fc?t=5
The screen darkened for a moment and there was a feeling that a pop-up might appear, but it quickly brightened, and eventually, no pop-up appeared.
If you look at the console log, you see that something appears and disappears for a moment. Here is a screenshot of that moment. It is hard to see, but it still looks like a popup caused by Intro.js-react.
Here's what it looks like when zoomed in.
However, if you look at it carefully, you will see that both top and left, which probably specify the position, are 0px, and width and height, which may be the width and height of the popup, are also 0px. It looks as if nothing will show up on the screen. I don't know why these values are set.
After modifying one more part of the code, the popup finally appeared without any errors.
Before
const onExit = () => {
setStepEnabled(false);
};
After
const onExit = () => {
setStepEnabled(true); // Changed from "false" to "true"
};
However, I am unclear why this worked. Since it is unclear, I was able to avoid the error in front of me, but I cannot apply it in the future. I would like you to continue to tell me why.
https://www.loom.com/share/a88fa3e835a44986889664151f030bfe
As a minor but important detail, I only defined three steps, but there were four... What the heck is the second pop-up, there is one mysterious step.
I am trying to make a quiz app using React (using API).
API Link:- (https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple)
But I am getting an error in the console saying the following:
enter image description here
This is my code:
import React from 'react';
import './App.css';
function App() {
const [answer,setAnswer]= React.useState([])
React.useEffect(()=>{
fetch("https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple")
.then((res)=> res.json())
.then(data => setAnswer(data.results[3]))
}, [])
return (
<div className="App">
<h1>{answer.question}</h1>
<h2>{answer.incorrect_answers[0]}</h2>
<h2>{answer.correct_answer}</h2>
</div>
);
}
export default App;
Error is in the line 24:1 which is:
<h2>{answer.incorrect_answers[0]}</h2>
When I am using without the index there is no error, instead the entire array of incorrect_answers is being printed but the moment I enter the index and refresh the error show up.
But if I don't refresh and just save the file in my VS Code it is automatically updating in my browser. The moment I refresh it shows up with the error.
Kindly help me in this, I am struck here for a very long time now.
PS: Don't suggest Async,Await method.
You can try the following code
{answer.incorrect_answers && answer.incorrect_answers[0]}
import { loadStripe } from '#stripe/stripe-js';
const apiKey = `${process.env.REACT_STRIPE_PUBLIC_KEY}`;
const stripePromise = loadStripe(apiKey);
After the promise is fulfilled, _apiKey in the stripePromise object is undefined.
Have been stuck on this error for days. Anyone care to help.
Thanks and much appreciated
process.env.REACT_STRIPE_PUBLIC_KEY is most likely empty. It's also unlikely to be available client-side, so likely needs to be rendered as part of the build process.
I finally figured this out guys. Apparently, .env variables in react had to be prefixed with REACT_APP_ then variable name.
Changing my variable name from REACT_STRIPE_PUBLIC_KEY to REACT_APP_STRIPE_PUBLIC_KEY fixed the bug. Thank you you for the insight much appreciated.
Side note because I was facing the same issue even though I had my env variable named correctly...
I was trying to give the variable to the loadStripe function like:
loadStripe(`${process.env.REACT_APP_STRIPE_PUBLIC_KEY}`);
It came back undefined so the solution for me was to put it into a local variable outside of the component definition first like written above and give that to the function:
const apiKey = `${process.env.REACT_APP_STRIPE_PUBLIC_KEY}`;
Than I passed this key to the function later:
const stripe = await loadStripe(apiKey);
Hope it will be useful for someone too.
I try to load the ID from a ble device via AsyncStorage that I save in a another component. But then I do this I get the following error:
ExceptionsManager.js:65 Cannot read property 'loadMac' of undefined
This is my loadMac() function:
export function loadMac() {
AsyncStorage.getItem(MAC_KEY)
.then((item) => {
console.log(item);
return item;
})
.catch((error) => {
console.log(error);
});
}
And I call this function in my component like this:
store.loadMac();
Then I try
AsyncStorage.getItem(MAC_KEY)
.then((item) => {
console.log(item)});
I will get my ID.. but not from my function that I have in another file.
Any solution ?
The error message says store is not defined, so you should look for a solution checking it.
By the code you posted I am assuming you've tried to have 2 different components: one stateless component named 'store' which you are exporting to access its' loadMac function. And another where you are importing the 'store' component. Correct me if I'm wrong.
If this is the case, your export syntax is incorrect. It should be something similar to this
export default const Store = () => {...}
And then import it like this:
import Store from './yourPathToStore';
If it's not, then you shouldn't have that export and also clarify what is exactly your 'store'.
Hope it helps.
I have a horizon/react app with react router and I have a simple button in my app:
<Link className="dark button" to="/">Another Search</Link>
When I click on it, I get the following exception:
Uncaught TypeError: Cannot read property 'getHostNode' of null
The error comes from:
getHostNode: function (internalInstance) {
return internalInstance.getHostNode();
},
Any idea why am I getting this?
I was facing a similar issue. It turns out that, in my case, was highlighthjs removing comments from the generated dom.
For text, React 15 is adding comment with the reactid instead of a span tag, as in:
<!-- react-text: 248-->
Another Search
<!--/react-test-->
Can you try something like this?
<Link className="dark button" to="/"><span>Another Search</span></Link>
This will force the generated DOM to include the span with the proper data-reactid attribute.
I would file an issue with react-router, maybe they can do that internally so you would not have to bother about it. But there are challenges with that as the Link child could be basically anything.
I have run into this issue multiple times in the last few days (new to react) and in almost all the cases, there was some syntax/code error that was not caught anywhere else. One example: If you write:
getInitialState() {
showModal: false
},
instead of:
getInitialState() {
return {
showModal: false
};
},
you will get this error. That is unless your build process does not already catch the error. Hope this helps someone (or myself in a couple of days. Hi Niyaz, you are welcome!).
If anyone else finds this thread. For me this turned out to be a null error for a prop.
Code generating error:
<Menu InventoryCount={this.state.inventoryModel.length} />
Working null checked code:
<Menu InventoryCount={this.state.inventoryModel ? this.state.inventoryModel.length : 0} />
For me, it's a typo which results in importing component from wrong module.
import { Link, Icon } from 'react-router';
import { Tag } from 'antd';
it should be
import { Link } from 'react-router';
import { Tag, Icon } from 'antd';
I just had to restart my nodemon backend.
Very interesting :) for me, it turned out that I was consuming props incorrectly in child component. Might be helpful for someone.
function Parent(){
const styleEle = { width: '100px'};
return (<div>
<Child styleO={styleEle}/>
</div>);
}
function Parent(props){
// here i was directly using <div style={styleO}> causing issue for me
return (<div style={props.styleO}>
{'Something'}
</div>)
}
if you getting error like "getHostNode" of null then its a error related to old code which is written before and it comes with version update of react
we have two ways to resolve the same
1) First we have to uninstall react from project and than again install react with the version specified( old one 15.4.2) current version of react is 15.6.1
2) Second way is bit time consuming but for future of application its good , go through the old code and handle errors(error handling of promises ) with the correct way following are few links which help you to figure out whats running behind
https://github.com/facebook/react/issues/8579
https://github.com/mitodl/micromasters/pull/3022
I got this error trying to render undefined value by mistake.
render(){
let name = this.getName(); // this returns `undefined`
return <div>name: {name}</div>
}
The fix is to fallback to null (where is accepted value)
render(){
let name = this.getName(); // this returns `undefined`
return <div>name: {name || null}</div>
}
I have had similar issue.
I was trying to manually update some plugin from node_modules, and when I reverted it back, i got this error.
I solved it by deleting node_modules and running NPM install.
In my case React was not in the scope of the file.
If you import a variable which has jsx from a different file which does not have react imported in it.
import React from "react";
Using following eslint plugin would avoid this: react-in-jsx-scope
Source: https://github.com/yannickcr/eslint-plugin-react/issues/84
In my case, an import was missing. Check your imports!
My solution is just deleting the cached images, files and cookies if you using the Chrome. Settings -> Privacy and security -> Clear browsing data -> Cached image and files / Cookies and other site data