# Unexpected token \< - React app

**URL:** <https://devforum.zoom.us/t/unexpected-token-react-app/26022>\
**Category:** Web\
**Created:** [August 3, 2020, 1:46am UTC](https://devforum.zoom.us/t/unexpected-token-react-app/26022 "2020-08-03T01:46:41Z")\
**Posts on this page:** 5\
**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:** [August 3, 2020, 1:46am UTC](https://devforum.zoom.us/t/unexpected-token-react-app/26022/1 "2020-08-03T01:46:41Z")

</div>

**Description**  
I’m just setting up a component to test zoom into a react app and im getting an error. I guess is something related to jquery library or zoom source but i was not able to find the solution yet.  
Im using jwtApp

**Error**  
Uncaught SyntaxError: Unexpected token ‘\<’  
VM101 5510\_js\_media.min.js:1 Uncaught SyntaxError: Unexpected token ‘\<’

**Which version?**

“@zoomus/websdk”: “^1.7.10”,

**To Reproduce(If applicable)**  
Steps to reproduce the behavior:  
just after component render

**Additional context**  
This is the component code:

```
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import axios from 'axios';

import { ZoomMtg } from '@zoomus/websdk';

import { Column, Row } from '../../components/Layout';

export const Container = styled(Column)`
  height: 100vh;
  margin: 20px;
  background-color: darkgrey;
`;

export const Section = styled(Row)`
  padding-top: ${(props) => props.withPadding && '15px'};
  border-bottom: ${(props) => props.withBorder && '1px solid whitesmoke'};
`;

const meetConfig = {
  apiKey: '',
  meetingNumber: '',
  leaveUrl: 'www.google.com.ar',
  userName: 'Test',
  role: 1 // 1 for host; 0 for attendee or webinar
};

export default () => {
  const [currentSignature, setCurrentSignature] = useState();

  useEffect(() => {
    const init = async () => {
      const {
        data: { signature }
      } = await axios.post('http://localhost:5001', {
        data: { meetingNumber: meetConfig.meetingNumber, role: 1 }
      });
      setCurrentSignature(signature);
    };
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();
    ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.4/lib', '/av');

    console.log('checkSystemRequirements');
    console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));

    init();
  }, []);

  const onClick = () => {
    ZoomMtg.init({
      debug: true,
      leaveUrl: 'www.google.com',
      success: () => {
        ZoomMtg.join({
          signature: currentSignature,
          apiKey: meetConfig.apiKey,
          meetingNumber: meetConfig.meetingNumber,
          userName: meetConfig.userName,
          userEmail: meetConfig.userEmail,
          passWord: meetConfig.passWord,
          success: (success) => {
            console.log(success);
          },
          error: (error) => {
            console.log(error);
          }
        });
      }
    });
  };

  return (
    <button type="button" onClick={onClick}>
      Empezar
    </button>
  );
};

```

and from the console, seems that is able to execute the loaders:

Navigated to [http://localhost:5000/zoomtest](http://localhost:5000/zoomtest)  
log.js:24 [HMR] Waiting for update signal from WDS…  
index.js:47 checkSystemRequirements  
zoomus-websdk.umd.min.js:2 Zoom support you browser. Chrome/84.0.4147.105  
zoomus-websdk.umd.min.js:2 You browser support below features  
index.js:48 {“browserInfo”:“Chrome/84.0.4147.105”,“browserName”:“Chrome”,“browserVersion”:“84.0.4147.105”,“features”:[“viewSharing”,“screenShare”,“computerVideo”,“computerAudio”,“callIn”,“callOut”,“chat”,“closedCaption”,“QA”]}  
zoomus-websdk.umd.min.js:2 pre load wasm success: [http://localhost:5000/node\_modules/@zoomus/websdk/dist/lib/av/5510\_audio.encode.wasm](http://localhost:5000/node_modules/@zoomus/websdk/dist/lib/av/5510_audio.encode.wasm)  
zoomus-websdk.umd.min.js:2 pre load wasm success: [http://localhost:5000/node\_modules/@zoomus/websdk/dist/lib/av/5510\_video.decode.wasm](http://localhost:5000/node_modules/@zoomus/websdk/dist/lib/av/5510_video.decode.wasm)  
zoomus-websdk.umd.min.js:2 pre load wasm success: [http://localhost:5000/node\_modules/@zoomus/websdk/dist/lib/av/5510\_video.mt.wasm](http://localhost:5000/node_modules/@zoomus/websdk/dist/lib/av/5510_video.mt.wasm)  
webpackHotDevClient.js:138 ./src/components/MakeAQuestion.js  
Line 74:6: React Hook useEffect has a missing dependency: ‘urlAlias’. Either include it or remove the dependency array react-hooks/exhaustive-deps  
printWarnings @ webpackHotDevClient.js:138  
handleWarnings @ webpackHotDevClient.js:143  
push…/node\_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210  
webim.min.js:1 Uncaught SyntaxError: Unexpected token ‘\<’  
5510\_js\_media.min.js:1 Uncaught SyntaxError: Unexpected token ‘\<’  
[Violation] ‘load’ handler took 150ms  
zoomtest:1 Unchecked runtime.lastError: The message port closed before a response was received.  
[Violation] ‘load’ handler took 230ms

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 4, 2020, 4:21pm UTC](https://devforum.zoom.us/t/unexpected-token-react-app/26022/2 "2020-08-04T16:21:11Z")

</div>

Hey @avglive.developer,

> [@avglive.developer](#):
>
> `ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.4/lib', '/av');`

I believe the issue is this line, notice how you are using a deprecated version of the Web SDK, 1.7.4.

Please try matching it with the version you stated you are using, 1.7.10. 🙂

Thanks,  
Tommy

---

<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:** [August 4, 2020, 5:06pm UTC](https://devforum.zoom.us/t/unexpected-token-react-app/26022/3 "2020-08-04T17:06:07Z")

</div>

Thanks! that’s the problem. Sorry i’m pretty new on this, i didn’t knew that those have to match. Many thanks!

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 5, 2020, 7:34pm UTC](https://devforum.zoom.us/t/unexpected-token-react-app/26022/4 "2020-08-05T19:34:41Z")

</div>

No worries! Happy to hear it is working now! 🙂

Let us know if you have additional questions!

-Tommy

---

<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:** [August 15, 2020, 7:34pm UTC](https://devforum.zoom.us/t/unexpected-token-react-app/26022/5 "2020-08-15T19:34:42Z")

</div>

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