global is not defined (SvelteKit/Vite)

[pjebs]

global is not defined
ReferenceError: global is not defined
    at node_modules/randombytes/browser.js (http://localhost:3000/node_modules/.vite/simple-peer.js?v=10be15c3:2351:18)
    at __require (http://localhost:3000/node_modules/.vite/chunk-UNANNA3Z.js?v=10be15c3:38:50)
    at node_modules/simple-peer/index.js (http://localhost:3000/node_modules/.vite/simple-peer.js?v=10be15c3:5160:23)
    at __require (http://localhost:3000/node_modules/.vite/chunk-UNANNA3Z.js?v=10be15c3:38:50)
    at http://localhost:3000/node_modules/.vite/simple-peer.js?v=10be15c3:6017:27

    <script>
        import { SimplePeer} from "simple-peer"
import { browser } from '$app/env';

    if (browser) {

 const p = new SimplePeer({
        initiator: location.hash === '#1',
        trickle: false
      })

      p.on('error', err => console.log('error', err))

      p.on('signal', data => {
        console.log('SIGNAL', JSON.stringify(data))
        document.querySelector('#outgoing').textContent = JSON.stringify(data)
      })

      document.querySelector('form').addEventListener('submit', ev => {
        ev.preventDefault()
        p.signal(JSON.parse(document.querySelector('#incoming').value))
      })

      p.on('connect', () => {
        console.log('CONNECT')
        p.send('whatever' + Math.random())
      })

      p.on('data', data => {
        console.log('data: ' + data)
      })

    }

    </script>

        <style>
      #outgoing {
        width: 600px;
        word-wrap: break-word;
        white-space: normal;
      }
    </style>

    <form>
      <textarea id="incoming"></textarea>
      <button type="submit">submit</button>
    </form>
    <pre id="outgoing"></pre>

[pjebs]

I also tried import * as SimplePeer from "simple-peer"

[pjebs]

The issue seems to be in the randombytes library

[pjebs]

My solution was to just add the simplepeer.min.js file without importing and then use window.SimplePeer. I couldn't find any other work-around.

[Swepool]

Got the same issue

[Swepool]

I did var global = global || window; in index.html

[pjebs]

@Swepool Your trick didn't work for me. It stopped the global is not defined error. But then SimplePeer gave me this error.

TypeError: Cannot read properties of undefined (reading 'call')
    at Peer.Readable (_stream_readable.js:184:10)
    at new Duplex (_stream_duplex.js:60:12)
    at new Peer (index.js:34:5)
    at gotMedia (caller.svelte? [sm]:14:4)

[ErcouldnT]

Any solution for this so far?

[pjebs]

@ErcouldnT https://github.com/feross/simple-peer/issues/883#issuecomment-1094142165

[ErcouldnT]

How do you get this script file?

[pjebs]

It's in the repo https://github.com/feross/simple-peer/blob/master/simplepeer.min.js

[machester4]

Fixed with

https://stackoverflow.com/questions/68975837/web3js-fails-to-import-in-vue3-composition-api-project/69021714#69021714

[wmcmurray]

This worked for me:

import SimplePeer from 'simple-peer/simplepeer.min.js'

[Ziao]

In short, when using Vite, this is the fix until this gets properly addressed.

In your vite.config.ts, add a resolve section with the following content. This tells the bundler to use the pre-bundled SimplePeer code whenever you import it. As a bonus, you get to keep the types, when using Typescript.

resolve: {
    alias: {
      // ...
      "simple-peer": "simple-peer/simplepeer.min.js",
    },
  },

[AAAAsea]

It worked elegantly. Thx : )