Black screen and no responsive in nuxtjs

Description
Hello, I have a problem when implementing the sdk zoom web in nuxtjs, at the time of doing it I get two warnings and the screen is black, I must update the page again and I can only enter there. Also, the responsive does not work and I get two errors, according to the forum says that I must enter the links and scripts correctly, I have already done that but it still does not work

Error
It does not enter until the page is refreshed again and the responsive does not work

Which Web Client SDK version?
I am using version 1.8.1 for css and version 1.9.0 in script, since if I use 1.9.1 the camera does not close until I give a next click

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. Go to ‘…’
  2. Click on ‘…’
  3. Scroll down to ‘…’
  4. See error

Screenshots

issue3 issue2

Device (please complete the following information):
All

Hi, @dhernandez,

Thank you for posting in the Developer Forum. We recommend using the latest version of the SDK 1.9.1, please can you try upgrading from 1.8.1 and see if the issue persists? There have been multiple bug fixes since your version of the SDK. The behavior you are experiencing seems to be because of the use of different version in your implementation. Our latest version 1.9.1 has the latest improvements and we strongly recommend that you update for the most robust support.

Please let me know if this helps.

Best,
Donte

Hi, I am using version 1.8.1 for css and scripts with version 1.9.1 because the camera does not close until I give a next click if I only use version 1.9.1, this problem I am already commenting on above, but it does not respond to the problem I have at the moment. Please can you help me with this problem, since if I use everything with version 1.9.1 I still have the problems that I described above? Thanks

Current bugs with version 1.9.0
issue2

Hey @dhernandez,

Thank you for providing more information. First, I’ll note that version 1.8.5 brought with it a required update so you’ll want to make sure that you are using the latest version of the Web SDK (1.9.1).

Further, it looks like the errors that you’re seeing are related to issues importing dependencies within Vue. Please see our Sample Vue.js App and use that as a reference when building with Nuxt.js.

I encountered those same issues when writing the Sample App. It was due to the fact that I was attempting to import dependencies through NPM (package.json) when the CDN method is what works with Vue.js.

Specifically, we can see that dependencies are imported in index.html:

Let me know if that helps.

Thanks,
Max

Hi @MaxM I have linked the dependencies in different ways and the problem is the same, either with version 1.9.0 and 1.9.1, I do not use NPM, only CDN and the problem persists and I do not know what is the reason for these errors?

One more thing, I do not link the dependencies in the nuxt.config since when I do that the rest of my application does not work, which led me to link locally as you indicate, but it does not work

Hey @dhernandez,

Thank you for the update. If you’re able to provide a git repo or a URL for your codebase where you see this issue, I’m happy to take a look and see if I can spot any issues there.

If you don’t want to share that information here, you can send an email to developersupport@zoom.us with a link to this thread and that information.

Thanks,
Max

Thank you very much @MaxM I attach the repository of the part of the problem with the sdk zoom so that you can help me to verify if the links and the structure in the code are correct, I await your prompt response, thank you.

Hey @dhernandez,

Thanks for providing that, I can see that you are explicitly rendering the Web SDK client side, that’s a good practice with Nuxt.js. Here are a couple of things I noticed, let me know if they are helpful:

On the following line, you are importing the Web SDK from a local path:

However, at the end of the file, you are also importing the Web SDK from the CDN:

This seems to indicate that files are being requested from both the local and CDN methods. I’ve seen the exact error you are encountering when making that mistake before too.

Next, I’m seeing that you add the zmmtg-root div element on your page but this should actually be injected by the Web SDK at runtime. Please try removing that div to avoid any conflicts.

Finally, once you are importing exclusively from the Web SDK, the best method to access the ZoomMtg object is by adding it to the Vue object prototype:

Then, within a component, you can reference the ZoomMtg object using this to refer to the Vue object:

With Nuxt.js, (I’m not a Nuxt expert but I have dabbled) I think that the Vue instance is actually contained within context.app

Let me know if that helps! :slightly_smiling_face:

Thanks,
Max

Hi @MaxM sorry for the delay in answering you, I was trying to implement all the changes you sent me but at the time of doing it I get the following error and I cannot identify why that happens, I have updated the github repository for you to help me review it, thank you very much

Hey @dhernandez ,

I have seen you have created a new thread:

We will support you in that thread now. :slight_smile:

Thanks,
Tommy

1 Like