react-intersection-observer | React implementation of the Intersection Observer API | Frontend Framework library

I downloaded a website template online and I didn't like the implementation to converted to TS and a next project so that it could easily be deployed to Vercel. However, when I put it in mobile mode on Chrome dev tools this happens: website picture

The entire website is pushed to the left half of the screen.

This is not a responsive issue because when I shrink the size on normal desktop view it works perfectly

desktop small screen view

I have tried setting HTML width to 100% and 100vh and every CSS trick in the book. I am convinced that it is an issue with server-side rendering because there are flashes where the website is rendering properly e.g. after a 500 error it works fine and then after I refresh the page it returns the half view.

next.config.js::

Can anyone tell me what's incorrect here? I am trying to install the mui search bar component.

I want to use Utterances for my blog. It should only load when someone scrolled to the bottom of the post so I use react-intersection-observer for that. I have made the following hook.

I would like to control when an animation (Framer Motion) can run using window.innerWidth, but in Next.js I get the following error message:

ReferenceError: window is not defined

This is a simplified version of my component named ValuesSection.jsx:

I am trying to change background video on scroll, using react-intersection-observer. When inView changes to true, useEffect must change state to sample2, and send new video to startscreen, where it's using as background video with position fixed. State is changing, but video is still the same.

//Startscreen

When I run gatsby develop in console this error shows up:

...

I'm working on a react project and trying to animate and show the divs once they're in the view. I'm using the useInView hook from 'react-intersection-observer' to determine if the div is in the view and then start the animation to make the div visible.

However, this doesn't work fine when I have two divs in the same component i.e, as soon as the first div is in the view - animate and show the first div, and when you scroll further as soon as the second div is in the view - animate and show the second div.

Any help would be appreciated.

Here's the code:

According to the code below, I need to call a function whenever inView is true, but using useEffect and useCallback listing the dependencies, I cause an infinite loop. The only ways I managed to avoid it were without listing the dependencies, but I get a warning that I have to list them. I tried only with useEffect, but the result is the same, listing the dependencies, I have a problem with the loops. Here is the code:

I'm trying to use React Hooks in my HOC to pass an event to parent that says when this component is on Viewport, to lazy load this component data using React Intersection Observer, but I'm struggling with the following error: Type '(props: IStockProps) => JSX.Element | JSX.Element[]' is not assignable to type 'FC'.

I started recently with Typescript and I'm still getting on how to read these errors and sometimes can be a bit confusing. This are my code

HOC