TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

[pahhh-blo]

Bug report

Description / Observed Behavior

What kind of issues did you encounter with SWR?

When attempting to use the useSWRInfinite hook by following the example, I get a type error coming from the useOnScreen hook.

TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

swr/examples/infinite-scroll/hooks/useOnScreen.js

Line 11 in 6746f49

observer.observe(ref.current)

// node_modules/tyepscript/lib/lib.dom.d.ts
interface IntersectionObserver {
    ...
    observe(target: Element): void;
    ....
}

This is where the problem is coming from. The Element type doesn't have a current attribute.

// node_modules/tyepscript/lib
declare var Element: {
    prototype: Element;
    new(): Element;
};

How would I go about solving this type issue?

Expected Behavior

How did you expect SWR to behave here?

I expected SWR to fetch initial data.

[pahhh-blo]

I got around this issue by utilizing react-intersection-observer.

// Modified example
// https://github.com/vercel/swr/blob/master/examples/infinite-scroll/pages/index.js
...
import fetcher from '../libs/fetch'
import { useInView } from 'react-intersection-observer'

...

export default function App() {
   ...

   const { ref, inView } = useInView()
   
   ...

  useEffect(() => {
    if (inView && !isReachingEnd && !isRefreshing) {
      setSize(size + 1)
    }
  }, [inView, isRefreshing])

  return (
    <div style={{ fontFamily: 'sans-serif' }}>
      ...
      <div ref={ref}>
        {isLoadingMore ? 'loading...' : isReachingEnd ? 'no more issues' : ''}
      </div>
    </div>
  )
}

[huozhi]

Hi @diegoramosxyz I cannot repro with the example on chrome/safari/firefox. Could you provide more information about the browser you're using?

Does adding a checking condition in useOnScreen hook works for you? like

// useOnScreen.js
export default function useOnScreen(ref) {
  const [isIntersecting, setIntersecting] = useState(false)

  useEffect(() => {
+    if (!ref.current) return