无法在 nextjs 中导入模块

Question

我尝试将缩放 websdk 模块导入下一个 js，但它失败了，因为 window object 未定义。

我所做的只是尝试导入 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 package 坏了还是什么？

Answer 1

请记住，NextJS 在浏览器和服务器上都运行。 在服务器端渲染期间， window 。 您可以使用动态导入仅导入浏览器上的一些依赖项，其中将定义 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在渲染组件之前定义了 state 变量。 {!!zoomMtg && <YourComponent />

注意：如果您可以控制YourComponent模块，那么更好的选择是将ZoomMtg的导入移动到此文件并正常导入。 然后使用 nextjs dynamic语法导入YourComponent 。

Answer 2

我在导入模块后在 nextjs 中遇到了同样的问题，它会给出这样的错误 - SyntaxError: Cannot use import statement outside a module。 如果你想在 nextjs 中不工作的情况下使用模块，这是最好的解决方案，如果模块不工作，这不是问题，只需配置设置 -

npm i next-compose-plugins 
npm i next-transpile-modules

next.config.js

const withPlugins = require("next-compose-plugins");
const withTM = require("next-transpile-modules")([
   "@project-serum/sol-wallet-adapter",
   "import another modules if not working..."
]);

module.exports = withPlugins([withTM], {
  pageExtensions: ["mdx", "md", "jsx", "js", "tsx", "ts", "cjs", "mjs"],
  distDir: "build",
  basePath: "",
  and config other... 
}

在 next.config.js 中进行此设置后，您可以使用模块假设在组件中创建一个新文件 demo.js，然后它将工作。

演示.js

import Wallet from "@project-serum/sol-wallet-adapter";

Answer 3

我测试了这段代码，它可以工作：

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