# React Websdk Unexpected token '\<'

**URL:** <https://devforum.zoom.us/t/react-websdk-unexpected-token/45913>\
**Category:** Web\
**Created:** [March 17, 2021, 9:29pm UTC](https://devforum.zoom.us/t/react-websdk-unexpected-token/45913 "2021-03-17T21:29:22Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![avglive.developer](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/avglive.developer/32/12834_2.png) [@avglive.developer](https://devforum.zoom.us/u/avglive.developer)\
**Post date:** [March 17, 2021, 9:29pm UTC](https://devforum.zoom.us/t/react-websdk-unexpected-token/45913/1 "2021-03-17T21:29:22Z")

</div>

Im trying to embed a zoom metting inside a div using zmmtg-root id and im geeting this exception

```
import { useEffect } from 'react';
import { ZoomMtg } from '@zoomus/websdk';
const apiKeys = {
    apiKey: process.env.REACT_APP_ZOOM_API_KEY,
    apiSecret: process.env.REACT_APP_ZOOM_API_SECRET,
};
const meetConfig = {
    apiKey: apiKeys.apiKey.toString(),
    meetingNumber: 97674828533,
    userEmail: 'avglive.developer@gmail.com', // must be the attendee email address
    passWord: 'FS2M95',
    role: 0,
    error(res) {
        console.log('Joining meeting Error');
        console.dir(res);
    },
    success(e) {
        console.log('Joining meeting Success');
        console.log('Success: ', e);
    },
};

const Zoom = () => {
    ZoomMtg.setZoomJSLib('https://source.zoom.us/1.9.1/lib', '/av');
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();

    const joinMeeting = (signature) => {
        ZoomMtg.init({
            leaveUrl: 'http://www.zoom.us',
            isSupportAV: true,
            debug: true,
            success: () => {
                ZoomMtg.join({
                    meetingNumber: meetConfig.meetingNumber,
                    userName: 'Usuario de prueba',
                    signature,
                    apiKey: meetConfig.apiKey,
                    passWord: meetConfig.passWord,
                    success: (res) => {
                        console.log('join meeting success', res);
                    },
                    error: (res) => {
                        console.error('join meeting error', res);
                    },
                });
            },
        });
    };

    useEffect(() => {
      
        ZoomMtg.generateSignature({
            meetingNumber: meetConfig.meetingNumber,
            apiKey: meetConfig.apiKey,
            apiSecret: apiKeys.apiSecret,
            role: meetConfig.role,
            success: (res) => {
                console.log('signature res: ', res);
                setTimeout(() => {
                    joinMeeting(res.result);
                }, 1000);
            },
        });
    }, []);
    return null;
};

const App = () => (
    <div id='zmmtg-root' style={{ height: '800px', width: '800px' }}>
        <Zoom />
    </div>
);
export default App;

```

**Error**  
Uncaught SyntaxError: Unexpected token ‘\<’

**To Reproduce(If applicable)**  
Just run the app

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [March 18, 2021, 12:57am UTC](https://devforum.zoom.us/t/react-websdk-unexpected-token/45913/2 "2021-03-18T00:57:54Z")

</div>

Hey @avglive.developer,

Thank you for reaching out to the Zoom Developer Forum. First, you can try removing the `#zmmtg-root` from your code as this element will be inserted by the [Web SDK](https://marketplace.zoom.us/docs/sdk/native-sdks/web#zoom-web-sdk). If that doesn’t help, you can use our [Sample React App](https://github.com/zoom/websdk-sample-react/tree/master/src) as a reference when building out your application.

You can also test with that app to confirm that you are supplying the correct details.

Let me know if that helps.

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![chris8](https://avatars.discourse-cdn.com/v4/letter/c/e56c9b/32.png) [@chris8](https://devforum.zoom.us/u/chris8)\
**Post date:** [March 19, 2021, 4:34pm UTC](https://devforum.zoom.us/t/react-websdk-unexpected-token/45913/3 "2021-03-19T16:34:02Z")

</div>

I’m experiencing this as well. I’m not including `#zmmtg-root`. Code is as follows:

```auto
import React, { useEffect } from "react";
import { ZoomMtg } from "@zoomus/websdk";

function Theirs() {
  useEffect(() => {
    ZoomMtg.setZoomJSLib("node_modules/@zoomus/websdk/dist/lib", "/av");
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();
  });

  const meetConfig = {
    apiKey: Meteor.settings.public.ZOOM_API,
    meetingNumber: [REDACTED],
    leaveUrl: "http://localhost:3000",
    userName: "test",
    passWord: "#####",
    userEmail: "test@example.com",
    role: 0,
  };

  function getSignature(e) {
    e.preventDefault();

    Meteor.call("zoom.generateSignature", meetConfig.meetingNumber, 0, function (e, response) {
      if (e) {
        console.log(e);
      }
      if (response) {
        Session.set("sigResponse", response);
        startMeeting(response);
      }
    });
  }

  function startMeeting(signature) {
    document.getElementById("zmmtg-root").style.display = "block";

    ZoomMtg.init({
      leaveUrl: meetConfig.leaveUrl,
      success: (success) => {
        console.log({ success, apiKey: meetConfig.apiKey });

        ZoomMtg.join({
          signature: signature,
          meetingNumber: meetConfig.meetingNumber,
          userName: meetConfig.userName,
          apiKey: Meteor.settings.public.ZOOM_API,
          userEmail: meetConfig.userEmail,
          passWord: meetConfig.passWord,
          success: (success) => {
            console.log("🐻", success);
          },
          error: (error) => {
            console.log("💥", error);
          },
        });
      },
      error: (error) => {
        console.log(error);
      },
    });
  }

  return (
    <div className='App'>
      <main>
        <h1>Zoom WebSDK Sample React</h1>

        <button onClick={getSignature}>Join Meeting</button>
      </main>
    </div>
  );
}

export default Theirs;

```

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [March 22, 2021, 7:05pm UTC](https://devforum.zoom.us/t/react-websdk-unexpected-token/45913/4 "2021-03-22T19:05:44Z")

</div>

Hey @chris8,

Try importing the library from the CDN instead of locally:

> <https://github.com/zoom/websdk-sample-react/blob/0ac10da7a4231b06da69a31c0f9c5ea07d0a848a/src/App.js#L5>

Let me know if that helps.

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![chris8](https://avatars.discourse-cdn.com/v4/letter/c/e56c9b/32.png) [@chris8](https://devforum.zoom.us/u/chris8)\
**Post date:** [March 23, 2021, 7:19am UTC](https://devforum.zoom.us/t/react-websdk-unexpected-token/45913/5 "2021-03-23T07:19:11Z")

</div>

Hey Max,  
I tried that and it worked. Thanks for your help.  
Chris

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [March 24, 2021, 5:30pm UTC](https://devforum.zoom.us/t/react-websdk-unexpected-token/45913/6 "2021-03-24T17:30:06Z")

</div>

Great! I’m glad that worked. Feel free to reach out if you encounter any further issues or questions. 🙂

Max

---

<div class="post-metadata">

**Author:** ![daniel2](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/daniel2/32/8619_2.png) [@daniel2](https://devforum.zoom.us/u/daniel2)\
**Post date:** [March 24, 2021, 7:44pm UTC](https://devforum.zoom.us/t/react-websdk-unexpected-token/45913/7 "2021-03-24T19:44:59Z")

</div>

This error appears since the Zoom SDK tries to load the file locally, but cannot find it, so the local web server returns a 404 HTML page (which begins with `<!DOCTYPE html>`), hence the ‘\<’ in the error message. The SDK expects a JavaScript file, but it receives an HTML response instead.

**Try this:**  
On line 6, try changing the path to a relative path, something like `../node_modules/@zoomus…`. Perhaps that will provide a correct path to the lib files.

* * *

What you could also do is to copy the `/av` directory (inside `node_modules/@zoomus/websdk/dist/lib`) into the `public` folder.

Then serving it that way using the path `'.'` like so:

```auto
ZoomMtg.setZoomJSLib(".", "/av");

```

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [March 25, 2021, 6:32pm UTC](https://devforum.zoom.us/t/react-websdk-unexpected-token/45913/8 "2021-03-25T18:32:46Z")

</div>

Hey @daniel2,

Thank you for sharing your experience with this issue as well as potential workarounds! That will certainly be helpful for other users.

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [April 25, 2021, 4:33am UTC](https://devforum.zoom.us/t/react-websdk-unexpected-token/45913/9 "2021-04-25T04:33:08Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.