# SyntaxError: Unexpected token 'export'

**URL:** <https://forum.deepar.ai/t/syntaxerror-unexpected-token-export/400>\
**Category:** SDK\
**Tags:** web, web-sdk\
**Created:** [August 22, 2023, 12:20pm UTC](https://forum.deepar.ai/t/syntaxerror-unexpected-token-export/400 "2023-08-22T12:20:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [August 22, 2023, 12:20pm UTC](https://forum.deepar.ai/t/syntaxerror-unexpected-token-export/400/1 "2023-08-22T12:20:56Z")

</div>

Added your web sdk to our next-js web client. It’s not compiling with an error:

```auto
helpers.js:112 Uncaught SyntaxError: Unexpected token 'export'
    at <unknown> (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/node_modules/deepar/js/deepar.esm.js:1)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.deepar (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/pages/app.js:3154:18)
    at __webpack_require__ (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./services/ar/index.ts:11:64)
    at Object../services/ar/index.ts (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/pages/app.js:1481:1)
    at __webpack_require__ (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./components/views/home/index.tsx:60:71)
    at Function. __webpack_require__.a (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./components/views/home/index.tsx:1:21)
    at Object../components/views/home/index.tsx (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/pages/app.js:1188:1)
    at __webpack_require__ (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/app.tsx:24:80)
    at Function. __webpack_require__.a (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./pages/app.tsx:1:21)
    at Object../pages/app.tsx (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/pages/app.js:22:1)
    at __webpack_require__ (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?page=%2Fapp&absolutePagePath=.%2Fpages%2Fapp.tsx&preferredRegion=&middlewareConfig=e30%3D!:20:72)
    at Function. __webpack_require__.a (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?page=%2Fapp&absolutePagePath=.%2Fpages%2Fapp.tsx&preferredRegion=&middlewareConfig=e30%3D!:1:21)
    at Object../node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?page=%2Fapp&absolutePagePath=.%2Fpages%2Fapp.tsx&preferredRegion=&middlewareConfig=e30%3D! (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/pages/app.js:2894:1)
    at __webpack_require__ (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/pages/app.js:3915:39)
    at <unknown> (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/pages/app.js:3916:28)
    at Object.<anonymous> (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/.next/server/pages/app.js:3919:3)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at requirePage (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/node_modules/next/dist/server/require.js:156:12)
    at <unknown> (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/node_modules/next/dist/server/load-components.js:68:84)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async loadComponentsImpl (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/node_modules/next/dist/server/load-components.js:68:26)
    at async DevServer.findPageComponentsImpl (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/node_modules/next/dist/server/next-server.js:772:36)
    at async DevServer.findPageComponents (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/node_modules/next/dist/server/dev/next-dev-server.js:1266:20)
    at async DevServer.renderPageComponent (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/node_modules/next/dist/server/base-server.js:1321:24)
    at async DevServer.renderToResponseImpl (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/node_modules/next/dist/server/base-server.js:1365:32)
    at async DevServer.pipeImpl (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/node_modules/next/dist/server/base-server.js:641:25)
    at async Object.fn (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/node_modules/next/dist/server/next-server.js:1156:21)
    at async Router.execute (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/node_modules/next/dist/server/router.js:315:32)
    at async DevServer.runImpl (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/node_modules/next/dist/server/base-server.js:615:29)
    at async DevServer.run (file:///Users/gavrilikhin_d/Code/chatroulette/app/web/client/node_modules/next/dist/server/dev/next-dev-server.js:897:20)

```

---

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [August 22, 2023, 12:22pm UTC](https://forum.deepar.ai/t/syntaxerror-unexpected-token-export/400/2 "2023-08-22T12:22:30Z")

</div>

package.json

```auto
"deepar": "^5.4.1",

```

---

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [August 22, 2023, 12:23pm UTC](https://forum.deepar.ai/t/syntaxerror-unexpected-token-export/400/3 "2023-08-22T12:23:16Z")

</div>

How we use sdk:

```auto
import deepar, { DeepAR } from "deepar"

import config from "@/config"

let deepAR: DeepAR | undefined
const initialize = async () => {
  if (!deepAR) {
    deepAR = await deepar.initialize({
      ...config.deepAR,
      additionalOptions: {
        cameraConfig: {
          disableDefaultCamera: true
        }
      },
    })
  }
}

const setVideoElement = (videoElement: HTMLVideoElement) =>
  deepAR?.setVideoElement(videoElement, true)

const setEffect = (effect: string) => deepAR?.switchEffect(effect)

const clearEffect = () => deepAR?.clearEffect()

export const ARService = {
  initialize,
  setVideoElement,
  setEffect,
  clearEffect,
}

```

```auto
  useEffect(() => {
    const setup = async () => {
      if (localVideoRef.current) {
        await ARService.initialize()
        ARService.setVideoElement(localVideoRef.current)
        await ARService.setEffect("https://cdn.jsdelivr.net/npm/deepar/effects/aviators")
      }
    }
    setup()
  }, [localVideoRef])

```

---

<div class="post-metadata">

**Author:** ![Daniil\_Gavrilikhin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/daniil_gavrilikhin/32/587_2.png) [@Daniil\_Gavrilikhin](https://forum.deepar.ai/u/Daniil_Gavrilikhin)\
**Post date:** [August 23, 2023, 10:19am UTC](https://forum.deepar.ai/t/syntaxerror-unexpected-token-export/400/4 "2023-08-23T10:19:38Z")

</div>

The issue was in next js. Next Js compiles code for both server and client. And DeepAR doesn’t work on sever.

To compile code only on client use:

```ts
const deepar = typeof window !== "undefined" && await import("deepar")

```

---

<div class="post-metadata">

**Author:** ![jelena](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/jelena/32/14_2.png) [@jelena](https://forum.deepar.ai/u/jelena)\
**Post date:** [August 23, 2023, 12:28pm UTC](https://forum.deepar.ai/t/syntaxerror-unexpected-token-export/400/5 "2023-08-23T12:28:37Z")

</div>

Thank you for letting us know