0
263
VistasLa siguiente aplicación js no puede ejecutar el módulo de reacción
Estoy tratando de hacer que un desplazador de página completa reaccione en mi próxima aplicación js desde este enlace
https://github.com/ibrahim-ih/react-full-page-scroller
Creé una aplicación usando npx next-create-app e instalé el módulo usando
npm install --save react-full-page-scroller
y agregó el siguiente código en la página index.js
import React from 'react' import MyComponent from 'react-full-page-scroller' import 'react-full-page-scroller/dist/index.css' const App = () => { const nav = [ { id: 1, title: 'title 1', className: 'page-nav-button', style: { width: '100%' } }, { id: 2, title: 'title 2', className: 'page-nav-button', style: { width: '100%' } }, { id: 3, title: 'title 3', className: 'page-nav-button', style: { width: '100%' } } ] const indicatorStyle = { height: '8px', width: '8px', margin: '10px', borderRadius: '4px', backgroundColor: 'white', transition: 'width 500ms ease' } const indicatorStyleActive = { width: '20px' } return ( <MyComponent pageNav={nav} indicatorStyle={indicatorStyle} indicatorStyleActive={indicatorStyleActive} > <div className='bg-blue' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} > <h1 className='page-number'>1</h1> </div> <div className='bg-green' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} > <h1 className='page-number'>2</h1> </div> <div className='bg-red' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} > <h1 className='page-number'>3</h1> </div> </MyComponent> ) } export default App Esto muestra el siguiente error 
Tenga en cuenta que probé la forma más simple, que está envolviendo 3 divs en el medio. Funciona por primera vez cuando lo guardo, pero cuando vuelvo a cargar la página, el error mencionado aparece nuevamente.
1 Respuestas
Responde la pregunta0
Parece que react-full-page-scroller no es compatible con SSR, por lo que tendrá que importarlo dinámicamente solo en el cliente.
Reemplace su import MyComponent from 'react-full-page-scroller' con las siguientes líneas:
import dynamic from 'next/dynamic' const MyComponent = dynamic(() => import('react-full-page-scroller'), { ssr: false })