SyntaxError: Unexpected token 'export'

SDK
,
1

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

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)
2

package.json

"deepar": "^5.4.1",
3

How we use sdk:

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,
}

  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])
4

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:

const deepar = typeof window !== "undefined" && await import("deepar")
1 Like
5

Thank you for letting us know