无法在 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

我测试了这段代码，它有效：

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

Answer 2

请记住，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 在渲染您的组件之前定义了状态变量。 {!!zoomMtg && <YourComponent />

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

Answer 3

在导入模块后我在 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，然后它将起作用。

demo.js

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

无法在 nextjs 中导入模块

Cannot import module in nextjs

javascript

reactjs

next.js

zoom-sdk

next.config.js

demo.js