# Uncaught SyntaxError: Unexpected token '\<' in video sdk

**URL:** <https://devforum.zoom.us/t/uncaught-syntaxerror-unexpected-token-in-video-sdk/47751>\
**Category:** Web\
**Created:** [April 12, 2021, 7:03am UTC](https://devforum.zoom.us/t/uncaught-syntaxerror-unexpected-token-in-video-sdk/47751 "2021-04-12T07:03:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hz463](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@hz463](https://devforum.zoom.us/u/hz463)\
**Post date:** [April 12, 2021, 7:03am UTC](https://devforum.zoom.us/t/uncaught-syntaxerror-unexpected-token-in-video-sdk/47751/1 "2021-04-12T07:03:23Z")

</div>

**Description**  
I am setting up test to use Video SDK. I am be able to let Sample in zoom-instant-sdk-web-1.0.2 run. but when I just copy paste some files from Sample and put that into my own projects. It keep getting error when joining/creating the session. There are two errors below. Do I miss anything ?

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

Uncaught ReferenceError: JsMediaSDK\_Instance is not defined

**Which Web Video SDK version?**  
1.0.2

**To Reproduce(If applicable)**  
Here is my code to use that, it basically just copy paste at sample but remove the children component to test join session

```auto
import React, {
  useEffect,
  useContext,
  useState,
  useCallback,
  useReducer,
} from 'react';
import ZoomMtgCm from '@zoomus/instantsdk';
import produce from 'immer';
import ZoomContext from './context/zoom-context';
import ZoomMediaContext from './context/media-context';
import { ChatClient, MediaStream } from './index-types';
import './App.css';

interface AppProps {
  meetingArgs: {
    sdkKey: string;
    topic: string;
    signature: string;
    name: string;
    password?: string;
  };
}
const mediaShape = {
  audio: {
    encode: false,
    decode: false,
  },
  video: {
    encode: false,
    decode: false,
  },
  share: {
    encode: false,
    decode: false,
  },
};
const mediaReducer = produce((draft, action) => {
  switch (action.type) {
    case 'audio-encode': {
      draft.audio.encode = action.payload;
      break;
    }
    case 'audio-decode': {
      draft.audio.decode = action.payload;
      break;
    }
    case 'video-encode': {
      draft.video.encode = action.payload;
      break;
    }
    case 'video-decode': {
      draft.video.decode = action.payload;
      break;
    }
    case 'share-encode': {
      draft.share.encode = action.payload;
      break;
    }
    case 'share-decode': {
      draft.share.decode = action.payload;
      break;
    }
    default:
      break;
  }
}, mediaShape);

function App(props: AppProps) {
  const {
    meetingArgs: { sdkKey, topic, signature, name, password },
  } = props;
  const [loading, setIsLoading] = useState(true);
  const [loadingText, setLoadingText] = useState('');
  const [isFailover, setIsFailover] = useState<boolean>(false);
  const [mediaState, dispatch] = useReducer(mediaReducer, mediaShape);
  const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);
  const zmClient = useContext(ZoomContext);
  useEffect(() => {
    const init = async () => {
      await zmClient.init('en-US', `${window.location.origin}/lib`);
      try {
        console.log("Start joining");
        console.log("signature is" + signature);
        await zmClient.join(topic, signature, name, password);
        console.log("Finish joining");
        setMediaStream(zmClient.getMediaStream());
        setIsLoading(false);
      } catch (e) {
        console.log(e.message);
        setIsLoading(false);
      }
    };
    init();
    return () => {
      ZoomMtgCm.destroyClient();
    };
  }, [sdkKey, signature, zmClient, topic, name, password]);
  const onConnectionChange = useCallback(
    (payload) => {
      if (payload.state === 'Reconnecting') {
        setIsLoading(true);
        setIsFailover(true);
        const { reason } = payload;
        if (reason === 'failover') {
          setLoadingText('Session Disconnected,Try to reconnect');
        }
      } else if (payload.state === 'Connected' && isFailover) {
        setIsLoading(false);
      } else if (payload.state === 'Closed') {
      }
    },
    [isFailover],
  );
  const onMediaSDKChange = useCallback((payload) => {
    const { action, type, result } = payload;
    dispatch({ type: `${type}-${action}`, payload: result === 'success' });
  }, []);
  useEffect(() => {
    zmClient.on('connection-change', onConnectionChange);
    zmClient.on('media-sdk-change', onMediaSDKChange);
    return () => {
      zmClient.off('connection-change', onConnectionChange);
      zmClient.off('media-sdk-change', onMediaSDKChange);
    };
  }, [zmClient, onConnectionChange, onMediaSDKChange]);
  return (
    <div className="App">
      {!loading && (
        <ZoomMediaContext.Provider value={{ ...mediaState, mediaStream }}>
          <div></div>
        </ZoomMediaContext.Provider>
      )}
    </div>
  );
}

export default App;

```

**Screenshots**

 ![截屏2021-04-12 上午12.04.13](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/f/2/f2db4c68f72e5f2bbad4b0a7de55f068fda142a6.png)

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [April 13, 2021, 10:29am UTC](https://devforum.zoom.us/t/uncaught-syntaxerror-unexpected-token-in-video-sdk/47751/2 "2021-04-13T10:29:33Z")

</div>

SDK will load `js_media.min.js` to handle stream data, please check the link `${window.location.origin}/lib/js_media.min.js` is accessible, you can get the `lib` folder at `@zoomus/instantsdk/dist/lib`.

If you use CRA to create the project, use `copy-webpack-plugin` to copy these dependent files to `public/lib` folder, in CRA, webpack devserver serves `public` directory as the default assets folder.

---

<div class="post-metadata">

**Author:** ![hz463](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@hz463](https://devforum.zoom.us/u/hz463)\
**Post date:** [April 14, 2021, 4:43am UTC](https://devforum.zoom.us/t/uncaught-syntaxerror-unexpected-token-in-video-sdk/47751/3 "2021-04-14T04:43:07Z")

</div>

Thx ! After copy `@zoomus/instantsdk/dist/lib` to `/public/lib` it works !

---

<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:** [April 15, 2021, 4:15pm UTC](https://devforum.zoom.us/t/uncaught-syntaxerror-unexpected-token-in-video-sdk/47751/4 "2021-04-15T16:15:05Z")

</div>

Happy to hear you got it sorted out @hz463 ! 🙂

Please let us know if you need help with anything else.

Thanks,  
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:** [May 16, 2021, 2:15am UTC](https://devforum.zoom.us/t/uncaught-syntaxerror-unexpected-token-in-video-sdk/47751/5 "2021-05-16T02:15:16Z")

</div>

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