Doesn't work in Vite : Global is not defined

[brandiqa]

I've created a React project in Vite and installed @daily-co/daily-js as per the docs

Below is the React view page, Chat.jsx, where I've imported the package:

import React from "react"
import Header from "../components/Header"
import DailyIframe from "@daily-co/daily-js"

const Chat = () => {
  let callFrame = DailyIframe.wrap(MY_IFRAME)
  return (
    <React.Fragment>
      <Header title="Chat" />
      <main>
        <p>Chat Interface</p>
      </main>
    </React.Fragment>
  )
}

export default Chat

When I ran the app, the page returns blank. Upon inspection, I get the following error in the browser console:

Uncaught ReferenceError: global is not defined
    <anonymous> http://localhost:3000/node_modules/.vite/@daily-co/daily-js.3293d25d.js:457
daily-js.3293d25d.js:457:36044
    <anonymous> http://localhost:3000/node_modules/.vite/@daily-co/daily-js.3293d25d.js:457
    InnerModuleEvaluation self-hosted:2382
    InnerModuleEvaluation self-hosted:2382
    InnerModuleEvaluation self-hosted:2382
    InnerModuleEvaluation self-hosted:2382
    evaluation self-hosted:2333

Below are my package dependencies:

"dependencies": {
    "@daily-co/daily-js": "^0.9.998",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react-refresh": "^1.1.1",
    "autoprefixer": "^10.2.1",
    "postcss": "^8.2.4",
    "prettier": "^2.2.1",
    "tailwindcss": "^2.0.2",
    "vite": "^2.0.0-beta.29"
  }

See full source code: https://github.com/brandiqa/daily-webrtc-demo

[iamwilhelm]

Just ran into this today. See #163

[Stormix]

+1

Had a similar issue in my Vue 3 project (which uses Vite), my current solution is adding: <script>var global = globalThis</script> to my index.html file before my Vite <script> tag

Hope this gets fixed or, at least, added to the docs to not confuse newcomers.

[kachar]

I got the same problem when using Vite

In order to resolve it I had to add the following to vite.config.ts:

export default defineConfig({
  define: {
    global: 'window',
  },
})

More info can be found at https://vitejs.dev/config/#define

[rileyjshaw]

This still appears to be an issue. Adding the following to vite.config.ts worked for me:

export default defineConfig({
  build: {
    rollupOptions: {
      external: ["jss-plugin-globalThis"],
    },
  },
  define: {
    global: 'globalThis',
  },
});