Next.js 13, Dynamic Loading, and RTK Query

[littlejon]

I have had this issue since Next.js 13 was released (but haven't had the chance to find a minimal reproduction until now).

Reproduction repo: https://github.com/littlejon/next13-rtk-dynamicimport-issue

Pages that contains lazy loaded component by next/dynamic, and using the React useQuery hook will throw the error.

This appears to be related to the isLoading property paired with the changes from React 18 and it is causing the fault to appear even when it isn't used in the component.

Page	Setup	Status
/failing	Lazy Loaded Component, and RTK Hook	❌
/failing2	Lazy Loaded Component, and RTK Hook with selectFromResult (contains isLoading)	❌
/working	Lazy Loaded Component, and RTK Hook with selectFromResult (excluding isLoading)	✅
/working2	No Lazy Loaded Component, and RTK Hook	✅
/working3	Lazy Loaded Component ({ ssr: false }), and RTK Hook	✅

I can confirm that all of the above use cases work with Next.js 12.

[littlejon]

I'm just doing some further testing within my project codebase by removing isLoading from my hooks and the issue presents itself sporadically, there is a race condition at play here by the looks of it. I'm going to try some profiling tools to see if I can find a source.

[littlejon]

This problem has been fixed in vercel/next.js#45565 (next@13.1.7-canary.5)