无法在 nextjs 中导入模块答案

【问题标题】：Cannot import module in nextjs [duplicate]无法在 nextjs 中导入模块
【发布时间】：2021-12-29 10:14:35
【问题描述】：

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

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

我正在使用带有 create-next-app 的 nextjs v12，我的代码非常简单。这是我的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包坏了还是怎么回事？

【问题讨论】：

这能回答你的问题吗？ Why am I getting ReferenceError: self is not defined when I import a client-side library?

标签： javascript reactjs next.js zoom-sdk

【解决方案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

【讨论】：

你试过导入模块吗？从“@zoomus/websdk”导入 { ZoomMtg }；
现在检查，这是缩放库的问题
只需检查您尝试使用的库，克隆它。 github.com/AchrafAsh/next-zoom-starter
我已经在前几天克隆并运行了那个 repo，但它仍然给我同样的错误:(

【解决方案2】：

请记住，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 的导入移动到此文件并正常导入。然后使用 nextjs dynamic 语法导入YourComponent。

【讨论】：

如何使用该代码导入 { ZoomMtg }？
一旦我有机会确认语法，我会将其添加到答案中。
@RobyCigar 我用一种可以为您解决问题的方法更新了答案... ZoomWindow 是您的组件还是内置的缩放组件？如果它是你的，那么我不会按照我建议的方式去做，我只会将 ZoomMtg 的导入移动到组件本身，并在你的组件上使用上面的动态导入解决方案。但是，如果您无法控制 ZoomWindow，那么我的第二个解决方案将起作用。

【解决方案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";

【讨论】：