在Next.js项目中使用报错 "window is not defined"

[tianxiuali]

在Next.js项目中import Highlighter from 'web-highlighter'就会报错

[tao]

You can import the library dynamically on NextJS.

import { useEffect } from 'react'
import Highlighter from "web-highlighter"

const Highlight = () => {
  useEffect(() => {
    let highlighter = new Highlighter()

    highlighter.run()

    return () => highlighter.dispose()
  }, [])

  return (
    <></>
  )
}

export default Highlight

import Navbar from './navbar'
import Footer from './footer'

import dynamic from 'next/dynamic'
const Highlight = dynamic(() => import('./Highlight'), { ssr: false })

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
          <main>{children}</main>
          <Highlight />
      <Footer />
    </>
  )
}

[tianxiuali]

You can import the library dynamically on NextJS.

import { useEffect } from 'react'
import Highlighter from "web-highlighter"

const Highlight = () => {
  useEffect(() => {
    let highlighter = new Highlighter()

    highlighter.run()

    return () => highlighter.dispose()
  }, [])

  return (
    <></>
  )
}

export default Highlight

import Navbar from './navbar'
import Footer from './footer'

import dynamic from 'next/dynamic'
const Highlight = dynamic(() => import('./Highlight'), { ssr: false })

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
          <main>{children}</main>
          <Highlight />
      <Footer />
    </>
  )
}

Oh cooool! It works! Thank you so much!