next.js出现"window is not defined"的问题

出现这个问题不奇怪就是了哈哈哈哈

问题：

window is not defined

原因：

安装的某个模块或者库仅在浏览器中使用，在Node.js环境中不可用，所以就要用到动态导入了。

解决：

使用 dynamic ，并且设置 ssr 为false

import dynamic from 'next/dynamic'

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

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

还可以设置带有加载组件的

import dynamic from 'next/dynamic'

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello'),
  { loading: () => <p>...</p> }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithCustomLoading />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

上面这种方式，引入的是一个组件，那么问题来了，如果引入的是一个函数怎么办呢？

暂时的解决方法是：

在使用前加判断，虽然这样超级麻烦，但是好像目前没有其他更好的解决方法

if  （typeof  window！== 'undefined' ） {  
  const  { addResponseMessage }  =  require （'react-chat-widget' ）;  
  addResponseMessage （“ test” ）; 
}  

参考资料：

Dynamic Import

window is not defined #5547

window is not defined #6080