fix: read swr devtools on demand

src/_internal/utils/devtools.ts

@@ -4,14 +4,28 @@ import { isWindowDefined } from './helper'
 // @ts-expect-error
 const enableDevtools = isWindowDefined && window.__SWR_DEVTOOLS_USE__
 
-export const use = enableDevtools
-  ? // @ts-expect-error
-    window.__SWR_DEVTOOLS_USE__
-  : []
+export const getDevToolsUse = () => {
+  if (!isWindowDefined) return []
+  // @ts-expect-error
+  return window.__SWR_DEVTOOLS_USE__ ?? []
+}
 
 export const setupDevTools = () => {
   if (enableDevtools) {
     // @ts-expect-error
     window.__SWR_DEVTOOLS_REACT__ = React
   }
 }
+
+// Due to Chrome extension limitations, the SWR DevTools extension may inject
+// `__SWR_DEVTOOLS_USE__` too late, where `enableDevtools` will always be false
+// In this case, we provide a global function `__SWR_DEVTOOLS_SETUP__` for the
+// extension to invoke when it is ready
+
+if (isWindowDefined) {
+  // @ts-expect-error
+  window.__SWR_DEVTOOLS_SETUP__ = () => {
+    // @ts-expect-error
+    window.__SWR_DEVTOOLS_REACT__ = React
+  }
+}

src/_internal/utils/middleware-preset.ts

@@ -1,4 +1,6 @@
-import { use as devtoolsUse } from './devtools'
+import { getDevToolsUse } from './devtools'
 import { middleware as preload } from './preload'
 
-export const BUILT_IN_MIDDLEWARE = devtoolsUse.concat(preload)
+export const getBuiltinMiddleware = () => {
+  return getDevToolsUse().concat(preload)
+}

src/_internal/utils/resolve-args.ts

@@ -1,7 +1,7 @@
 import { mergeConfigs } from './merge-config'
 import { normalize } from './normalize-args'
 import { useSWRConfig } from './use-swr-config'
-import { BUILT_IN_MIDDLEWARE } from './middleware-preset'
+import { getBuiltinMiddleware } from './middleware-preset'
 
 // It's tricky to pass generic types as parameters, so we just directly override
 // the types here.
@@ -19,7 +19,7 @@ export const withArgs = <SWRType>(hook: any) => {
     // Apply middleware
     let next = hook
     const { use } = config
-    const middleware = (use || []).concat(BUILT_IN_MIDDLEWARE)
+    const middleware = (use || []).concat(getBuiltinMiddleware())
     for (let i = middleware.length; i--; ) {
       next = middleware[i](next)
     }