Search code examples
webrtcsvelte

Svelte - ReferenceError: buffer is not defined

Trying to setup a WebRtc connection in my new Svelte app, and am hitting this error whenever I try to import a library.

ReferenceError: buffer is not defined

Example Code: https://github.com/nickgrealy/svelte-webrtc (link also below)

Here are the steps to reproduce: install the library, then import it on a *.svelte component.

e.g. peerjs

npm i peerjs
import Peer from "peerjs";

also occurs for this library - simple-peer

npm i simple-peer
import Peer from "simple-peer";

Both give the following error:

Uncaught ReferenceError: buffer is not defined
    at main.ts:14

Not really sure what to try next... writing vanilla Javascript? Try other libraries?

I don't know how to configure rollup... (hoping it's something simple that one of you have come across before!).

N.B. not sure if relevant, I converted the Svelte project to Typescript (using the inbuilt script).

** Added code to reproduce **

https://github.com/nickgrealy/svelte-webrtc/blob/main/src/main.ts#L2

Console logs from yarn dev

yarn run v1.22.10
$ rollup -c -w
rollup v2.56.3
bundles src/main.ts ā†’ public/build/bundle.js...
(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on "buffer" and "events". You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node
LiveReload enabled
(!) Plugin node-resolve: preferring built-in module 'buffer' over local alternative at '/Users/userx/svelte-webrtc/node_modules/buffer/index.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) Circular dependencies
node_modules/readable-stream/lib/_stream_readable.js -> node_modules/readable-stream/lib/_stream_duplex.js -> node_modules/readable-stream/lib/_stream_readable.js
node_modules/readable-stream/lib/_stream_duplex.js -> node_modules/readable-stream/lib/_stream_writable.js -> node_modules/readable-stream/lib/_stream_duplex.js
node_modules/readable-stream/lib/_stream_duplex.js -> node_modules/readable-stream/lib/_stream_writable.js -> /Users/userx/svelte-webrtc/node_modules/readable-stream/lib/_stream_duplex.js?commonjs-proxy -> node_modules/readable-stream/lib/_stream_duplex.js
node_modules/readable-stream/lib/_stream_readable.js -> node_modules/readable-stream/lib/_stream_duplex.js -> /Users/userx/svelte-webrtc/node_modules/readable-stream/lib/_stream_readable.js?commonjs-proxy -> node_modules/readable-stream/lib/_stream_readable.js
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
buffer (guessing 'buffer')
events (guessing 'require$$0$1')
created public/build/bundle.js in 2.9s

[2021-09-05 00:31:10] waiting for changes...

> svelte-app@1.0.0 start
> sirv public --no-clear "--dev"


  Your application is ready~! šŸš€

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ LOGS ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€

  [00:31:18] 200 ā”€ 5.50ms ā”€ /
  [00:31:18] 200 ā”€ 0.60ms ā”€ /global.css
  [00:31:18] 200 ā”€ 0.71ms ā”€ /build/bundle.css
  [00:31:18] 200 ā”€ 1.35ms ā”€ /build/bundle.js
  [00:31:22] 200 ā”€ 0.76ms ā”€ /global.css
  [00:31:22] 200 ā”€ 1.83ms ā”€ /build/bundle.css
  [00:31:22] 200 ā”€ 3.96ms ā”€ /build/bundle.js.map

** Update **

Added the node plugin, now getting this error...

Uncaught ReferenceError: require$$1$1 is not defined

... with these logs.

yarn run v1.22.4
$ rollup -c -w
rollup v2.56.3
bundles src/main.ts ā†’ public/build/bundle.js...
(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on "buffer". You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node
LiveReload enabled
(!) Circular dependency
polyfill-node.global.js -> polyfill-node.global.js
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
buffer (guessing 'require$$1$1')
created public/build/bundle.js in 2.6s

[2021-09-05 00:57:04] waiting for changes...
npm WARN lifecycle The node binary used for scripts is /var/folders/05/qnr367194ss7ktgg_c2r57440000gp/T/yarn--1630767421122-0.4620373266212361/node but npm is using /Users/userx/.nvm/versions/node/v14.17.3/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> svelte-app@1.0.0 start /Users/userx/svelte-webrtc
> sirv public --no-clear "--dev"


  Your application is ready~! šŸš€
Solution

  • When using peerjs browserify is not required and change output format to cjs in rollup.config.js.

    If you want to keep iife then you need to disable strict mode in rollup.config.js under output property strict: false because the library has some issue.