升级Next.js从9版本至12版本后出现TypeError: destroy is not a function报错该如何解决？

I recently upgraded my Next.js app from version 9 to 12, and ran into a pair of issues that never popped up in the old version: a TypeError: destroy is not a function error, plus this console warning:

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)

After digging into it, I realized this is all because Next.js 12 enforces stricter checks against React's useEffect rules compared to v9. Here's how I fixed it, and how you can too:

What's Causing This? #

Back in Next.js 9, React's useEffect was more lenient about return values—returning null didn't trigger warnings or errors. But when you upgrade to Next.js 12, you're also getting a newer React version (17+), where useEffect's rules are strictly enforced.

If your effect doesn't need a cleanup function, you have two valid options: return nothing (no return statement at all) or return undefined. Returning null confuses React, which tries to call that null as a cleanup function—hence the destroy is not a function error (React internally refers to cleanup functions as "destroy" functions).

Step-by-Step Fix #

1. Locate all useEffect calls that return null
   You'll likely have code that looks like this:

   useEffect(() => {
     // Your side effect logic here
     return null;
   }, []);
   

2. Update to a valid return pattern
   Choose one of these two correct approaches:

   • Option 1: Remove the return statement entirely (cleanest and recommended)

     useEffect(() => {
       // Your side effect logic here
     }, []);
     

   • Option 2: Return undefined (if you prefer explicitly writing a return)

     useEffect(() => {
       // Your side effect logic here
       return undefined;
     }, []);
     

3. Double-check cleanup functions (if you use them)
   If your effect does need cleanup (like clearing timers or event listeners), make sure you're returning a function, not any other value. For example:

   useEffect(() => {
     const interval = setInterval(() => {
       console.log("Running interval");
     }, 1000);
     // Valid cleanup function
     return () => clearInterval(interval);
   }, []);
   

After making these changes, both the error and warning should disappear. This fix works because we're aligning our code with React's official useEffect specifications, which Next.js 12 now enforces more strictly.

内容的提问来源于stack exchange，提问作者haris khan