1

I tried to import zoom websdk module to next js but it failed because window object is not defined.

What i did is just trying to import websdk module but this error happened

enter image description here

I'm using nextjs v12 with create-next-app and my code is pretty simple. here's on my 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

is the websdk package broken or something?

Roby Cigar
  • 766
  • 2
  • 14
  • 28

3 Answers3

3

Keep in mind that NextJS runs both in the browser and on the server. During a server side render, window is not defined. You can use dynamic imports to only import some dependencies on the browser, where window will be defined.

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

Here is the example from 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

You can do essentially the same, but with your dependency.

Edit: I thought ZoomMtg was a component. The first example from the docs is closer to what you need for ZoomMtg.

Something like this should do the trick:

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

Then just confirm zoomMtg the state variable is defined before rendering your component. {!!zoomMtg && <YourComponent />

NOTE: If you have control over the YourComponent module, then a better alternative would be to move the import of ZoomMtg to this file and just import it normally. Then import YourComponent with the nextjs dynamic syntax.

Cal Irvine
  • 1,104
  • 8
  • 17
  • how can i import { ZoomMtg } with that code? – Roby Cigar Nov 18 '21 at 15:01
  • Once I've had a chance to confirm the syntax I'll add it to the answer. – Cal Irvine Nov 18 '21 at 15:06
  • @RobyCigar I updated the answer with a method that should do the trick for you... Is `ZoomWindow` your component or a built in zoom component? If it's yours then I wouldn't do it the way I suggest and I would just move the import of `ZoomMtg` into the component itself and use the dynamic import solution above on your component. However, if you don't have control over `ZoomWindow` then my second solution will work. – Cal Irvine Nov 18 '21 at 15:27
0

i have faced same issue in nextjs after import module it will give a error like this - SyntaxError: Cannot use import statement outside a module. if you want to use module if it is not working in nextjs it is best solution and it is not a issue just configer setting if modules not working follow -

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... 
}

after this setting in next.config.js you can use module suppose make a new file demo.js in components and after this it will work.

demo.js

import Wallet from "@project-serum/sol-wallet-adapter";
Deepak Kurmi
  • 21
  • 4
-1

I tested this code, it works:

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

Check your @zoomus/websdk lib, then

  • npm i in your folder
  • re-run your project
illia chill
  • 1,652
  • 7
  • 11