javascript - ReferenceError: Element no está definido (Objeto.<anonimo>) 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 de NextJs: Element no está definido al usar Intro.js, pero no funcionó para mí.

Como puedes ver en la captura de pantalla adjunta, el error dice que es porque un elemento no está definido en el Object.<anonymous>.

Este Object.<anonymous> es <Steps>. Comenta esto, porque si lo comentas, el error desaparece. Y <Steps> se importa desde intro.js-react. Y intro.js-react ya está instalado, como se muestra en la tercera captura de pantalla adjunta a continuación.

Veamos un poco más dentro del node_module como se mencionó en el mensaje de error. En la tercera captura de pantalla adjunta, si miras la línea 310, carácter 110, verás 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 no está definido.

Por cierto, obtengo este error cuando recargo, pero una vez que lo comento y recargo de nuevo, se muestra correctamente. Si descomento la sección comentada después de esto, el intro.js-react aparece correctamente. Creo que esto es otra pista, pero no sé por qué.

Respuesta #1

Actualicé al día siguiente. Modifiqué el código como se muestra a continuación, lo 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>
  );
}

Entonces el error original "El elemento no está definido" desapareció, pero el problema todavía 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 rápidamente se iluminó, y finalmente, no apareció ninguna ventana emergente.

Si miras el registro de la consola, verás que algo aparece y desaparece por un momento. Aquí hay una captura de pantalla de ese momento. Es difícil de ver, pero todavía parece un popup causado por Intro.js-react.

Así es como se ve cuando se hace zoom.

Sin embargo, si lo miras detenidamente, verás que tanto top como left, que probablemente especifican la posición, son 0px, y width y height, que podrían ser el ancho y la altura del popup, también son 0px. Parece como si nada apareciera 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 entiendo por qué esto funcionó. Dado que no está claro, pude evitar el error que tenía delante, 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 el segundo pop-up? Hay un paso misterioso.