我嘗試將 zoom websdk 模塊匯入下一個 js 但由于未定義視窗物件而失敗。
我所做的只是嘗試匯入 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 包壞了還是什么？
uj5u.com熱心網友回復：
請記住，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使用 nextjsdynamic語法匯入。
uj5u.com熱心網友回復：
我測驗了這段代碼，它有效：
const Page = () => {
const handleClick = async () => {
alert("ok")
}
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
檢查你的@zoomus/websdk庫，然后
npm i在你的檔案夾中re-run your project
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/360082.html
標籤：javascript 反应 下一个.js 缩放SDK