In React -Reveal.destroy() → Error: Cannot read properties of undefined (reading 'forEach')

[brandontrew]

Error: when trying to destroy() the reveal instance within React (per documentation)

Reveal.js destroy call failed. TypeError: Cannot read properties of undefined (reading 'forEach')
    at eval (reveal.esm.js:8:61023)
    at Array.forEach (<anonymous>)
    at M.unbind (reveal.esm.js:8:60987)
    at Se (reveal.esm.js:8:83644)
    at Object.destroy (reveal.esm.js:8:100765)
    at eval (RevealApp.jsx:95:31)
    at safelyCallDestroy (react-dom.development.js:22932:1)
    at commitHookEffectListUnmount (react-dom.development.js:23100:1)
    at invokePassiveEffectUnmountInDEV (react-dom.development.js:25207:1)
    at invokeEffectsInDev (react-dom.development.js:27351:1)

Initialize & Return, per https://revealjs.com/react/

  useEffect(() => { 
      if (revealRef.current) return;
      let resizeObserver;

      revealRef.current = new Reveal(revealInitDivRef.current, RevealConfig);
      revealRef.current.initialize().then(() => {

        revealRef.current.addEventListener('drop', handleFileDrop);
        revealRef.current.on( 'slidechanged', event => {
          handleSlideChange(event)
        });
        revealRef.current.on('resize', event => {
          if (revealRef.current) {
            revealRef.current.sync();
            revealRef.current.layout();
          }
        });

        resizeObserver = new ResizeObserver(() => {
          if (revealRef.current) {
            revealRef.current.sync();
            revealRef.current.layout();
          }
        });
        if (revealElement) resizeObserver.observe(revealElement);

        revealRef.current.sync();
        revealRef.current.layout();
        setRevealInitialized(true);

      })
      .catch(error => {
        console.error("Failed to initialize editor:", error);
      });

      return () => {
        try {
          if (revealRef.current) {
            console.log('revealRef.current',revealRef.current);
            revealRef.current.destroy();
            revealRef.current = null;
          }
        } catch (e) {
          console.warn("Reveal.js destroy call failed.", e);
        }
      };

    }, []);

[hakimel]

This was happening when calling the destroy method for a reveal.js instance that hadn't been initialized. Fixed in 0799c8f

[hakimel]

Sidenote, in your example you shouldn't need to call revealRef.current.layout(). Your call to revealRef.current.sync() already triggers a layout so it's being called twice.

[brandontrew]

Many thanks. I'm rendering new async slides into reveal, and they were all showing up stacked on top of each other - I was trying sync/layout and anything else. What worked is setting a specific move to slide().

…

On Fri, Mar 22, 2024 at 9:34 AM Hakim El Hattab ***@***.***> wrote: Sidenote, in your example you shouldn't need to call revealRef.current.layout(). Your call to revealRef.current.sync() already triggers a layout so it's being called twice. — Reply to this email directly, view it on GitHub <#3593 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATOOLTJ6ES52DSQ5OTKX533YZQXORAVCNFSM6AAAAABFCPDKRWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMJVGEYTANRSGE> . You are receiving this because you authored the thread.Message ID: ***@***.***>