aws-samples / aws-samples/amazon-ivs-realtime-web-demo-reactjs
Error: self is not defined
- 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?

### 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.

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
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