javascript - 无法在 nextjs 中导入模块

Question

我尝试将 Zoom websdk 模块导入到下一个 js，但由于未定义 window 对象而失败。

我所做的只是尝试导入 websdk 模块，但发生了此错误

我正在使用 nextjs v12 和 create-next-app，我的代码非常简单。 这是我的pages/index.js

import { ZoomMtg } from '@zoomus/websdk';

const Page = () => {

    const handleClick = async () => {

    }

    return (
        <main>
            {/* get meeting number and role here (and password maybe) */}
            <button onClick={handleClick}>Join meeting</button>
            {/* <div>{meetingUrl && <ZoomWindow url={meetingUrl} />}</div>  */}
        </main>
    )
}

export default Page

是websdk包损坏了还是什么？

Answer 1

请记住，NextJS 在浏览器和服务器上运行。在服务器端渲染期间，window没有定义。您可以使用动态导入仅导入浏览器上的一些依赖项，其中将定义窗口。

https://nextjs.org/docs/advanced-features/dynamic-import

这是来自 NextJS 的示例

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

您基本上可以做同样的事情，但需要依赖您的依赖。

编辑:我认为 ZoomMtg 是一个组件。文档中的第一个示例更接近您对 ZoomMtg 的需求。

像这样的事情应该可以解决问题:

  const [zoomMtg, setZoomMtg] = useState(null)
  useEffect(() => {
   ( async () => {
     if(typeof window !== "undefined"){
      const {ZoomMtg} = (await import('@zoomus/websdk'))
      setZoomMtg(ZoomMtg)
    }
    })()
  }, [])

然后只需确认 zoomMtg状态变量是在渲染组件之前定义的。 {!!zoomMtg && <YourComponent />

注意:如果您可以控制 YourComponent模块，那么更好的选择是移动 ZoomMtg 的导入到这个文件并正常导入即可。然后导入YourComponent与 nextjs dynamic语法。