Not working on scroll or on visible

[thediveshsharma]

Current Behavior

Component is not working as expected when scrolled to view.
SCSS is not loading , nor JS is getting downloaded .
Example faq section collapse/uncollapse not working.

Expected Behavior

When scrolled to view FAQ section should have SCSS classes and collapse and uncollapse (onclick show/hide should work)

Steps to Reproduce the Problem

Environment

• Version: "dependencies": {
  "aws-sdk": "^2.1414.0",
  "axios": "^0.27.2",
  "bootstrap": "^4.6.2",
  "cheerio": "^1.0.0-rc.12",
  "dayjs": "^1.11.5",
  "env-cmd": "^10.1.0",
  "express-http-context": "^1.2.4",
  "google-recaptcha-v2": "^1.0.4",
  "js-base64": "^3.7.2",
  "js-cookie": "^3.0.1",
  "lodash": "^4.17.21",
  "next": "12.2.5",
  "next-lazy-hydrate": "^1.1.0",
  "next-pwa": "^5.6.0",
  "node-sass": "^7.0.1",
  "react": "18.2.0",
  "react-confetti-explosion": "^1.0.3",
  "react-dom": "18.2.0",
  "react-google-login": "^5.2.2",
  "react-google-recaptcha": "^2.1.0",
  "react-intersection-observer": "^9.5.0",
  "react-linkedin-login-oauth2": "^2.0.0",
  "react-modal-video": "^1.2.9",
  "react-redux": "^8.0.2",
  "react-share": "^4.4.0",
  "react-slick": "^0.29.0",
  "react-star-ratings": "^2.3.0",
  "reactstrap": "^8.9.0",
  "redux": "^4.2.0",
  "redux-thunk": "^2.4.1",
  "s3-streamlogger": "^1.9.0",
  "sass": "^1.54.7",
  "slick-carousel": "^1.8.1",
  "winston": "^3.9.0"
  },
• Platform: Windows 11
• Node.js Version: node:14.17

[thediveshsharma]

It was not working with 'visible' 'scroll' , it worked when I used compatible mode : true
const Footer = lazyHydrate(() => import('../footer/index'), {
compatibleMode: true,
on: ['visible', 'scroll'],
});