Sdk style is corrupted

Web Client SDK
#1

Description
A clear and concise description of what the question is.
Every thing is working as expected but the style is corrupted (buttons and lists don’t get any style )

Error
The full error message or issue you are running into.
in console i get
XML Parsing Error: not well-formed
Location: https://rwcff.cloud.zoom.us/wc/ping/84166188349?ts=1617694047002&auth=Et0YrPZR5VI4QMGKpI8ZBLWZTxrYFpiKSNjvaeWKzjk&rwcToken=FaSV_8I0xRO3z3Dz84C-PgCMQaix9pXiBnKTg013TVo&dmz=1
Line Number 1, Column 1:

Which Web Client SDK version?
Knowing the version can help us to identify your issue faster. [e.g. 1.9.0]

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

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

Screenshots
If applicable, add screenshots to help explain your problem.

image
image1528×799 49.3 KB

Device (please complete the following information):

  • Device: [e.g. iPhone 12]
  • OS: [e.g. iOS 14]
  • Browser: [e.g. Chrome]
  • Browser Version [e.g. 88.0.4324.150 (Official Build) (x86_64)]

Additional context
Add any other context about the problem here.

#2

Hey @maged.ahmedr,

The error message relating to XML formatting is not related to the styling issues, it’s a known bug specifically with Firefox and shouldnt affect functionality in any way.

Are you using any other style sheets or inline styles, or are you embedding the SDK in a frame?

If you’re able to post a full screenshot or paste of your code (redacting any private info) it would be most helpful.

Thanks,
Alex

#3

thanks for your reply
i got no style sheet any where
here’s the meeting file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meeting</title>
</head>
<body>
    
    <script src="{{asset('/js/jquery-3.3.1.min.js')}}" ></script>
    <script src="https://source.zoom.us/1.8.5/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/1.8.5/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/1.8.5/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/1.8.5/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/1.8.5/lib/vendor/lodash.min.js"></script>
    <script src="https://source.zoom.us/zoom-meeting-1.8.5.min.js"></script>
    <script>
        ZoomMtg.setZoomJSLib('https://source.zoom.us/1.8.5/lib', '/av'); 
        ZoomMtg.preLoadWasm();
        ZoomMtg.prepareJssdk();
        $(document).ready(() => {
            setTimeout(() => {
                ZoomMtg.init({
                    debug: true,
                    leaveUrl: @json(env('APP_URL')) + '/leave',
                    isSupportAV: true,
                    success() {
                        console.log('init success')
                        ZoomMtg.join({
                            signature: @json($signature),
                            apiKey: @json($data['apiKey']),
                            meetingNumber: @json($data['meetingNumber']),
                            userName: @json($data['userName']),
                            passWord: @json($data['passWord']),
                            success: (success) => {
                                console.log(success)
                            },
                            error(res) { 
                                console.log(res) 
                            }
                        })
                    },
                    error(res) {
                        reject(res);
                    }
                })
            }, 1000);
        })
    </script>
</body>
</html>
#4

Hi,

The first thing I would recommend is to upgrade from 1.8.5 to 1.9.1, since this is the latest WebSDK version.

Secondly, please ensure that there are no console errors (other than the XML errors). If there are, please paste them here.

Thanks,
Alex

#5

i upgraded still same issue

in console i get
Cookie “zm_aid” has been rejected because it is already expired.
and
The script from “https://zoom.us/api/v1/wc/info?meetingNumber=#######&userName=Maged&passWord=123&signature=######&apiKey=##&lang=en-US&userEmail=&cv=1.9.1&proxy=1&sdkOrigin=####&tk=&ztk=&sdkUrl=####&captcha=&captchaName=&suid=&_=###&callback=###” was loaded even though its MIME type (“”) is not a valid JavaScript MIME type.
i put # on real data here
also i got many warnings like this

Screenshot from 2021-04-07 12-12-15
Screenshot from 2021-04-07 12-12-151600×900 236 KB

#6

Hey @maged.ahmedr,

Thank you for reaching out to the Zoom Developer Forum. Issues with the Web SDK can happen if CSS or JS resources aren’t being imported correctly. Looking at the code you provided, it looks like the CSS dependencies aren’t being imported:

image
image925×303 26.4 KB

Please see our Sample Web App for as well as our guide on building an app with the Web SDK. You can use the Sample App as a reference when building out your application.

Let me know if that helps.

Thanks,
Max

#7

Oh thanks i missed that, now everything is working fine

Cheers

1 Like
#8

Hey @maged.ahmedr,

Great! I’m glad to hear that worked. I’ll go ahead and close this topic now but feel free to open a new topic if you encounter any further issues or questions.

Thanks,
Max

1 Like
#9