diff --git a/packages/next/client/use-intersection.tsx b/packages/next/client/use-intersection.tsx
index 1563982c5cbd6..3208903260ff2 100644
--- a/packages/next/client/use-intersection.tsx
+++ b/packages/next/client/use-intersection.tsx
@@ -23,7 +23,7 @@ type Observer = {
   elements: Map<Element, ObserveCallback>
 }
 
-const hasIntersectionObserver = typeof IntersectionObserver !== 'undefined'
+const hasIntersectionObserver = typeof IntersectionObserver === 'function'
 
 export function useIntersection<T extends Element>({
   rootRef,
diff --git a/test/integration/image-component/basic/pages/missing-observer.js b/test/integration/image-component/basic/pages/missing-observer.js
index 7def70f2f0c7d..d96091a0b6696 100644
--- a/test/integration/image-component/basic/pages/missing-observer.js
+++ b/test/integration/image-component/basic/pages/missing-observer.js
@@ -1,12 +1,14 @@
-import React, { useLayoutEffect } from 'react'
 import Image from 'next/image'
+import Script from 'next/script'
 
 const Lazy = () => {
-  useLayoutEffect(() => {
-    IntersectionObserver = null //eslint-disable-line
-  })
   return (
     <div>
+      <Script
+        id="IntersectionObserver-null"
+        strategy="beforeInteractive"
+        dangerouslySetInnerHTML={{ __html: 'IntersectionObserver = null' }}
+      />
       <p id="stubtext">
         This is a page with one lazy-loaded image, to be used in the test for
         browsers without intersection observer.