Error: self is not defined

This is an amazon-ivs-web-broadcast issue. I'm posting here as I can't find the amazon-ivs-web-broadcast package on GitHub.com.

TL;DR:

When using amazon-ivs-web-broadcast in a Node.js environment, rather than in a browser, it throws Error: self is not defined. This can also happen when using Next.js.

Without digging into amazon-ivs-web-broadcast's minified JavaScript code I assume this is happening because amazon-ivs-web-broadcast accesses the window object.

Is there a plan to make amazon-ivs-web-broadcast isomorphic, or a workaround so it can be used in a Lambda function or EC2 instance?

error-self-is-not-defined

Lambda function or EC2 instance use case:

I wish to use amazon-ivs-web-broadcast in a Lambda function, or an EC2 instance, to join a stage and stream to its participants, and to pipe participant streams to other AWS services.

Is there a better way to achieve this?

Next.js usage:

In a Next.js app I'm loading the amazon-ivs-web-broadcast package as a dependency using package.json as shown in the code below:

package.json Note: the code below has been shortened for brevity

{
  "dependencies": {
    "amazon-ivs-web-broadcast": "^1.9.0",
  },
}

amazon-ivs-web-broadcast is then imported into a client component as follows:

example.tsx

"use client";

import { Stage } from "amazon-ivs-web-broadcast";

export default function Example() {
  // ...
  // Create a new stage instance
  let stage: Stage | null = new Stage(/* ... */);
  // ...
}

When the app runs Error: self is not defined is thrown.

unhandled-runtime-error

Without digging into amazon-ivs-web-broadcast's minified JavaScript code I assume this is happening because Next.js first runs client component code on the server before running it on the client.

I see that in this demo repo amazon-ivs-web-broadcast is being loaded using "next/script". Is this to work around this issue?

Hi @mattvick, sorry to hear you're having this issue! While I can't speak to your question regarding Lambda & EC2, I may be able to help with your Nextjs issue.

As a workaround to your self is not defined errors in Nextjs, consider dynamically importing the library. An example implementation is available in this web broadcast demo app as well. As noted, you can also load the library with next/script.

For a full list of known issues with the web broadcast sdk, you may refer to the following pages:

Regarding your Lambda & EC2 questions, I would also recommend that you post on AWS re:Post where our developer advocates may provide additional insights.

aws-samples / amazon-ivs-realtime-web-demo-reactjs