0
262
ViewsNext js application cannot run react module
I am trying to make a react full page scroller into my next js app from this link
https://github.com/ibrahim-ih/react-full-page-scroller
I have created an app using npx next-create-app and installed the module using
npm install --save react-full-page-scroller
and added the following code in the index.js page
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 AppThis shows the following error
Note I tried the simplest form, which is wrapping 3 divs in between It works for the first time as I save it, but as I reload the page the mentioned error shows again.
·
Santiago Trujillo
1 answers
Answer question0
It looks like react-full-page-scroller is not compatible with SSR, so you'll have to dynamically import it on the client only.
Replace your import MyComponent from 'react-full-page-scroller' with the following lines:
import dynamic from 'next/dynamic'
const MyComponent = dynamic(() => import('react-full-page-scroller'), {
ssr: false
})
·
Santiago Trujillo
Report
Answer question