Next js application cannot run react module

Question

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 App

This 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.

Answer 1

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
})