Nov 13, 2022
0
Level 2
Inertia + React SSR + IntersectionObserver is not defined
hi, im getting this error in my inertia + ssr app
IntersectionObserver is not defined
i think i should implement the IntersectionObserver in the ssr.js but i dont know how help guys .
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { createInertiaApp } from '@inertiajs/inertia-react'
import createServer from '@inertiajs/server'
import route from '../../vendor/tightenco/ziggy/dist/index.m';
const appName = 'lara DZ';
createServer((page) => createInertiaApp({
page,
render: ReactDOMServer.renderToString,
title: (title) => `${title} - ${appName}`,
resolve: name => require(`./Pages/${name}`),
setup: ({ App, props }) => {
global.route = (name, params, absolute) =>
route(name, params, absolute, {
...page.props.ziggy,
location: new URL(page.props.ziggy.location),
});
return <App {...props} />;
},
}))
and this is the component where use the observer
import React,{ useEffect, useState } from "react"
export default function useOnScreen(ref) {
const [isIntersecting, setIntersecting] = useState(false)
const observer = new IntersectionObserver(
([entry]) => setIntersecting(entry.isIntersecting)
)
useEffect(() => {
observer.observe(ref.current)
// Remove the observer as soon as the component is unmounted
return () => { observer.disconnect() }
}, [])
return isIntersecting
}
Please or to participate in this conversation.