下一个 js 应用程序无法运行 react 模块答案

【问题标题】：Next js application cannot run react module下一个 js 应用程序无法运行 react 模块
【发布时间】：2021-07-03 06:33:02
【问题描述】：

我正在尝试通过此链接在我的下一个 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 它在我保存时第一次工作，但是当我重新加载页面时，再次显示提到的错误。

【问题讨论】：

标签： javascript node.js reactjs next.js

【解决方案1】：

看起来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
})

【讨论】：