0
310
ViewsReferenceError: el elemento no está definido (Objeto. <anónimo>) en Intro.js-react, React, Next.js y Tailwind CSS
El código es como aquí.
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> ); }Un error es así.
Este error es similar a este problema NextJs: El elemento no está definido al usar Intro.js pero no funcionó para mí.
Como puede ver en la captura de pantalla adjunta, el error dice que se debe a que un elemento no está definido en Object.<anonymous> .
Este Object.<anonymous> es <Steps> . Comente esto, porque si lo comenta, el error desaparece. Y <Steps> se importa desde intro.js-react. E intro.js-react ya está instalado, como se muestra en la tercera captura de pantalla adjunta a continuación.
Miremos un poco más dentro de node_module como se menciona en el mensaje de error. En la tercera captura de pantalla adjunta, si observa la línea 310, el carácter 110, verá que efectivamente hay un Element . Según el primer mensaje de error adjunto, esto no está definido. No sé por qué es esto.
El step.element en este <Steps> no es isRequired . No entiendo por qué dicen que Element is not defined .
Por cierto, recibo este error cuando recargo, pero una vez que lo comento y lo vuelvo a cargar, se muestra correctamente. Si elimino el comentario de la sección comentada nuevamente después de esto, el intro.js-react aparece correctamente. Creo que esta es otra pista, pero no sé por qué.
1 answers
Answer question0
Actualicé al día siguiente. Código modificado como se muestra a continuación, que resolvió el error original.
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> ); }Luego, el error original "El elemento no está definido" desapareció, pero el problema aún existía. El problema es así.
https://www.loom.com/share/22a307b2221f42d5b3548647f5da23fc?t=5
La pantalla se oscureció por un momento y hubo la sensación de que podría aparecer una ventana emergente, pero se iluminó rápidamente y, finalmente, no apareció ninguna ventana emergente.
Si miras el registro de la consola, ves que algo aparece y desaparece por un momento. Aquí hay una captura de pantalla de ese momento. Es difícil de ver, pero aún parece una ventana emergente causada por Intro.js-react.
Esto es lo que parece cuando se acerca.
Sin embargo, si lo observa detenidamente, verá que tanto top como left , que probablemente especifican la posición, son 0px , y width y height , que pueden ser el ancho y el alto de la ventana emergente, también son 0px . Parece que no aparecerá nada en la pantalla. No sé por qué se establecen estos valores.
Después de modificar una parte más del código, la ventana emergente finalmente apareció sin ningún error.
Antes
const onExit = () => { setStepEnabled(false); };Después
const onExit = () => { setStepEnabled(true); // Changed from "false" to "true" };Sin embargo, no tengo claro por qué esto funcionó. Como no está claro, pude evitar el error frente a mí, pero no puedo aplicarlo en el futuro. Me gustaría que siguieras diciéndome por qué.
https://www.loom.com/share/a88fa3e835a44986889664151f030bfe
Como detalle menor pero importante, solo definí tres pasos, pero había cuatro... Qué diablos es la segunda ventana emergente, hay un paso misterioso.