0
311
VistasReferenceError: Element is not defined (Object.<anonymous>) in Intro.js-react, React, Next.js and Tailwind CSS
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.
1 Respuestas
Responde la pregunta0
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.