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.

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/

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(),[])