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

Error: self is not defined

Open
#3 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
13
Forks
9
PR merge metrics
No merged PRs in 30d

Description

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](https://github.com/aws-samples/amazon-ivs-realtime-web-demo-reactjs/assets/651430/c8e1ad25-57ec-4e13-9de2-892c74bb294f)

### 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_
```json
{
"dependencies": {
"amazon-ivs-web-broadcast": "^1.9.0",
},
}
```

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

`example.tsx`
```ts
"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](https://github.com/aws-samples/amazon-ivs-realtime-web-demo-reactjs/assets/651430/39e4db85-6e92-4e14-81cd-87ea866d4432)

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?

Contributor guide

Open the contributing guide

Research direction

Start with the package.json dependency and the example.tsx client-component import, then compare this usage with the demo's next/script loading approach. Determine whether the problem belongs in this repository or the amazon-ivs-web-broadcast package; done should be a confirmed supported usage path or a clearly documented limitation and workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, nodejs, react
Domain
backend, web-dev
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
18/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.