0
246
VistasTypeError: no se pueden leer las propiedades de nulo cuando se usa Locomotive Scroll con Next.js
Estoy tratando de usar el desplazamiento de la locomotora, pero aparece un error.
Intento usar react-locomotive-scroll pero obtengo el mismo error
Mi _app.tsx se ve así
¿Dónde está mi error? Trato de poner un componente de diseño interno que envuelve toda la página, pero tampoco funcionó.
import type { AppProps } from "next/app"; import { ThemeProvider, Global } from "@emotion/react"; import { theme } from "../src/common/theme"; import { globalStyles } from "../src/styles/global"; import { appWithTranslation } from "next-i18next"; import "locomotive-scroll/dist/locomotive-scroll.css"; import { useEffect } from "react"; function MyApp({ Component, pageProps }: AppProps) { useEffect(() => { let scroll; import("locomotive-scroll").then((locomotiveModule) => { scroll = new locomotiveModule.default({ el: document.querySelector("[data-scroll-container]"), smooth: true, smoothMobile: false, resetNativeScroll: true, }); }); // `useEffect`'s cleanup phase return () => scroll.destroy(); }); return ( <ThemeProvider theme={theme}> <Global styles={globalStyles(theme)} /> <Component {...pageProps} data-scroll-container /> </ThemeProvider> ); } export default appWithTranslation(MyApp); También uso next-transpile-modules
const withTM = require("next-transpile-modules")(["gsap", "locomotive-scroll"]);2 Respuestas
Responde la pregunta0
Lo que funcionó para mí fue hacer esto:
useEffect(() => { ;(async () => { try { const LocomotiveScroll = (await import('locomotive-scroll')).default const dataScrollContainer = document.querySelector( '[data-scroll-container]', ) if (!dataScrollContainer) { console.warn( 'locomotive-scroll: [data-scroll-container] dataset was not found. You likely forgot to add it which will prevent Locomotive Scroll to work.', ) } window.locomotive = new LocomotiveScroll({ el: dataScrollContainer ?? undefined, smooth: true, }) } catch (error) {} })() return () => { window.locomotive?.destroy() } }, []) Y tenga un div con data-scroll-container en alguna parte. Entonces, en lugar de cargarlo directamente, hágalo asíncrono.
0
El error ocurre porque ningún elemento con el atributo data-scroll-container está presente en el DOM.
Establecer data-scroll-container en Component en realidad no agrega el atributo a ningún elemento. El Component es un componente React, no un elemento HTML.
Debe agregar un nuevo elemento que envuelva el Component y establecer el atributo en su lugar.
<div data-scroll-container> <Component {...pageProps} /> </div>