typeError: destroy is not a function nextjs

Question

When I upgraded nextjs application from 9 to 12. There were some errors shown, that were not being taken take care of in previous version. One of them was: typeError: destroy is not a function

In the console I could see it mentioned next-dev.js?3515:25 Warning: useEffect must not return anything besides a function, which is used for clean-up. You returned null. If your effect does not require clean up, return undefined (or nothing

Not sure it was because of the update nextjs has become too strict during it's checking, but I will put it down the solution for myself and everyone.

Horntail

Answer 1

In almost all of the cases this error occurs when you tried to return anything from your useEffect hook that is not a function.

The fault,

useEffect(() => someFunction());

or

useEffect(() => {
   return someFunction();
});

The Fix,

useEffect(() => {
   someFunction();
});

For more information read the following article,

https://typeofnan.dev/fix-uncaught-typeerror-destroy-is-not-a-function-in-react/

Haileyhailfellowwellmet

Answer 2

I also got the same issue, i was upgraded my Next App from v9 to v12. And i found it because the useEffect

My code before was like (my Next v9) =

  useEffect(() => {
    return () => {
      removeEventListener("blur", updateWarning);

      const inputFile = document.getElementById("input-file-ujian");
      if (inputFile) {
        inputFile.removeEventListener("click", (e) => {
          window.removeEventListener("blur", updateWarning);
        });
        inputFile.removeEventListener("change", handleChange);
      }

      const videos = document.getElementsByClassName("note-video-clip");
      for (let i = 0; i < videos.length; i++) {
        videos[i].removeEventListener("mouseleave", () => {
          window.addEventListener("blur", updateWarning);
        });
        videos[i].removeEventListener("mouseenter", () => {
          window.removeEventListener("blur", updateWarning);
        });
      }
    };
  }, [pesertaUjian, warning]);

and this is my Next v12 (I remove the return code) =

useEffect(() => {
      removeEventListener("blur", updateWarning);

      const inputFile = document.getElementById("input-file-ujian");
      if (inputFile) {
        inputFile.removeEventListener("click", (e) => {
          window.removeEventListener("blur", updateWarning);
        });
        inputFile.removeEventListener("change", handleChange);
      }

      const videos = document.getElementsByClassName("note-video-clip");
      for (let i = 0; i < videos.length; i++) {
        videos[i].removeEventListener("mouseleave", () => {
          window.addEventListener("blur", updateWarning);
        });
        videos[i].removeEventListener("mouseenter", () => {
          window.removeEventListener("blur", updateWarning);
        });
      }
  }, [pesertaUjian, warning]);

I don't know why, I just remove all my return code in my useEffect and it's work for me

Update: Update, i found that if you are using useEffect and async await. Don't use like it

useEffect(async() => {},[])

but you can create function async await outside the useEffect, for example

const yourFunction = async () => {}

useEffect(() => yourFunction(),[])

Dependable

Answer 3

There were a lot of place in the code which I am maintining where useEffect was returning null like:

useEffect(() => {
   if (variantSelected) {
     const productViewTrackingTimeout = setTimeout(
       useProductViewTracking({
        ...blah blah
       }),
       1000
     );
     return () => {
       clearTimeout(productViewTrackingTimeout);
     };
   }
   return null;
 }, [variantSelected, productTitle, router]);```

I removed all return null values, and just putting a return works too. But not any value.

Horntail

Answer 4

I got this same error when updating from react 17 to 18, but in my case it was caused by the function in a useEffect being async. Removing async/await and switching to .then(result => {...} fixed it for me.

Eks:
Code that failed

useEffect(async () => {
  const result = await fetchData()
  // Do stuff
})

Code that works

useEffect(() => {
  fetchData().then(result => {
    // Do stuff
  })
})

Guaiacol