typeError: destroy is not a function nextjs

user_19154461 0
Viewed 1532

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.

use-effect react-hooks next.js reactjs
3 Answers

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.
user_191544610

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

user_154839180
user_106012860
Related