Reveal.js：ReferenceError：全新安装时未定义导航器

编程问答 2022-05-29

问题描述

我正在尝试基于此在我的 React.js/Next.js 网站中使用reveal.js https://revealjs.com/installation/#installing-from-npm

我得到的错误是：

Server Error

ReferenceError: navigator is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source

external%20%22reveal.js%22 (1:0) @ eval

> 1 | module.exports = require("reveal.js");

我通读了整个揭示网站并进行了搜索，在任何地方都没有提到导航器或依赖项。

这是我的代码，（CSS 包含在我的 _app.js 中）：

import Head from 'next/head'
import Link from 'next/link'
import ContainerFull from '../components/container-full'
import MoreStories from '../components/more-stories'
import HeroPost from '../components/hero-post'
import Intro from '../components/intro'
import Layout from '../components/layout'
import { getHomePage,getHomeSlides } from '../lib/api'
import { CMS_NAME } from '../lib/constants'
import Header from '../components/header'
import dynamic from 'next/dynamic'

const MySlides = dynamic(
  () => import('../components/slides'),{ ssr: false }
)

export default function Page( {page,artwork} ) {
   return (
    <>
      <Layout>
        <Head>
          <title>{ page.SEO.title }</title>
          <Meta name="description" content={page.SEO.MetaDesc} />
        </Head>
        <Header />
        <ContainerFull>
          <h1>{ page.title }</h1>
          <MySlides />
          <div dangerouslySetInnerHTML={{ __html: page.content }} />

          {artwork.nodes && artwork.nodes.map((arts) => (
            <span>{arts.title}</span>
          ))}
        </ContainerFull>
      </Layout>
    </>
  )
}

export async function getStaticProps({ params }) {
  const data = await getHomePage()
  console.log(data)
  const art = await getHomeSlides()
  console.log(art)

  return {
    props: {
      page: data,artwork: art,},}
}

slides.js 文件

import Reveal from 'reveal.js'
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js'
import React,{ useEffect } from "react"

const MySlides = () => {
  useEffect(() => {
    let deck = new Reveal({
        plugins: [ Markdown ]
    })
    deck.initialize()
  })

  return (
    <div>SlideShow</div>
  )
}

export default MySlides

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreactjsreactjsreveal.js