"ReferenceError: Can't find variable: global" on latest version of vue3

[frisk038]

Hey there, im experiencing a bug on the latest version on vue. Here the call stack.

Steps to reproduce the behavior: I just created a simple app: main.js

import { createApp } from 'vue'
import { VueWebRTC } from 'vue-webrtc'
import App from './App.vue'

createApp(App).component(VueWebRTC.name, VueWebRTC).mount('#app')

App.vue

<script setup>
  import Demo from "./components/Demo.vue";
</script>

<template>
  <Demo></Demo>
</template>

<style>
</style>

components/Demo.vue

<script setup>
</script>

<template>
    <vue-webrtc ref="webrtc" width="100%" roomId="sample-room"></vue-webrtc>
</template>

<script>
export default {
}
</script>

<style>
</style>

I go npm run dev and I got a crash stating : ReferenceError: Can't find variable: global

Using:

• macos
• safari
• Version 15.4 (17613.1.17.1.13)

[westonsoftware]

Hi, I haven't seen this before, which versions of vue and vue-webrtc are in your package.json?

[frisk038]

Hi, I got this in my file.

"dependencies": { "core-js": "^3.6.5", "setimmediate": "^1.0.5", "vue": "^3.2.45", "vue-webrtc": "^3.0.1" }

[westonsoftware]

Can you run with vue: 3.0.5 ?

I am also seeing errors when I create a new project with the latest "@vue/cli@5.0.8 and when I add vue-webrtc to it ... but I'm seeing different errors, I think related to vue 3.2 and maybe webpack 5 polyfills not working. --Andy

[westonsoftware]

Hey @frisk038, I just upgraded the ./sample app to run with the latest @vue/cli. There were some webpack 5 issues that I worked around in the vue.config.js file. I also removed "core-js" and added "node-polyfill-webpack-plugin" in there.
The vue-webrtc package did not change. --Andy

[frisk038]

Hey thanks for your help 😃 Unfortunately I got no success, im using vite and latest vue and I still got the ReferenceError.

I tested it on brand new vanilla project, npm init vue@latest (no to all) I copied what you put in your sample project for the *.vue files.

vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  transpileDependencies: true,
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

As you can see I don't know where to put the polyfill stuff 🤷 Maybe in order to use your project I need to use webpack ?

[westonsoftware]

Yeah, this sucks ... try something like this ... https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2