[英]Next js application cannot run react module
我正在尝试通过此链接将整页滚动条添加到我的下一个 js 应用程序中
https://github.com/ibrahim-ih/react-full-page-scroller
我使用 npx next-create-app 创建了一个应用程序并使用
npm install --save react-full-page-scroller
并在 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
请注意,我尝试了最简单的形式,将 3 个 div 包裹在其中。它在我保存它时第一次工作,但是当我重新加载页面时,再次显示提到的错误。
看起来react-full-page-scroller
与 SSR 不兼容,因此您必须仅在客户端上动态导入它。
将您的import MyComponent from 'react-full-page-scroller'
替换为以下行:
import dynamic from 'next/dynamic'
const MyComponent = dynamic(() => import('react-full-page-scroller'), {
ssr: false
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.