Git Product home page Git Product logo

web-sdks's Introduction

Web SDKs

This monorepo contains all the packages required to integrate 100ms on the web.

What is included?

The packages folder contains all the SDK's of 100ms. Here is a brief overview of them:

Directory Package Description Link
hms-video-store @100mslive/hms-video-store This package contains the core SDK and the reactive store parts. README
react-icons @100mslive/react-icons This contains all the icons used in the 100ms prebuilt. README
react-sdk @100mslive/react-sdk This contains the base React Hooks and some commonly used functionalities as React Hooks. README
roomkit-react @100mslive/roomkit-react This contains the React components used in the Prebuilt and the Prebuilt component itself. README
roomkit-web @100mslive/roomkit-web This is a web component port of the HMSPrebuilt component from the roomkit-react. If you are not using React,this can be used as a web component. README

For full documentation, visit 100ms.live/docs


How to integrate?

The 100ms SDK gives you everything you need to build scalable, high-quality live video and audio experiences.

There are two ways you can add 100ms to your apps:

  1. Custom UI

    • 100ms SDKs are powerful and highly extensible to build and support all custom experiences and UI.
    • Related packages include: @100mslive/react-sdk, @100mslive/hms-video-store and @100mslive/react-icons.
    • Get started with integrating the SDK using the How to Guide.

Navigate to react-sdk for the base React Hooks and some commonly used functionalities by clicking here.

  1. 100ms Prebuilt

    • 100ms Prebuilt is a high-level abstraction with no-code customization that enables you to embed video conferencing and/or live streaming UI—with a few lines of code.
    • Related packages include: roomkit-react and roomkit-web.
    • Get started with 100ms Prebuilt using the Prebuilt Quickstart for Web.

Navigate to roomkit-react for the React components used in Prebuilt and the Prebuilt component itself by clicking here.

Banner

100ms Prebuilt Cross Platform Support

Client Repository Docs Example
Web web-sdks Link prebuilt-react-integration
Android 100ms-android Link AndroidPrebuiltDemo
iOS 100ms-roomkit-ios Link 100ms-roomkit-example
Flutter 100ms-flutter Link hms_room_kit/example
React Native 100ms-react-native Link react-native-room-kit/example

Setup

Local Setup

Node version 18.0.0 or later

if you are using a different version in other projects, use nvm to manage node versions.

git clone https://github.com/100mslive/web-sdks.git
cd web-sdks
yarn install
yarn build

Running Sample Prebuilt

cd examples/prebuilt-react-integration
yarn dev

http://locahost:<port>/<room-code>

Once you run yarn dev, the localhost link with the port will be generated automatically. Just get the roomCode from 100ms dashboard and append at the end

Testing Changes Locally

Run yarn start by navigating to the package you are making changes to, the changes should reflect in the above sample app.

For example, if you are making changes in roomkit-react(prebuilt), run yarn start in that package. The sample app should auto reload.

Note: Make sure yarn build is run atleast once before using yarn start


Contributing

We welcome external contributors or anyone excited to help improve 100ms SDKs. If you'd like to get involved, check out our contribution guide, and get started exploring the codebase.

Please join us on Discord to discuss any new ideas and/or PRs.


Community & Support

  • GitHub Issues - Submit any bugs or errors you encounter using the Web SDKs.
  • Discord - Hang out with the community members, share your projects or ask questions to get help from the 100ms team.
  • Contact - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform.

web-sdks's People

Contributors

raviteja83 avatar eswarclynn avatar triptu avatar kaustubhkumar05 avatar amar-1995 avatar aniketbehera avatar deep-codes avatar github-actions[bot] avatar ragzzy-r avatar a-vishnoi avatar apnerve avatar a-kverma avatar harshil-100ms avatar ashwins93 avatar sahil-100ms avatar hdz-666 avatar saikatmitra91 avatar zakybilfagih avatar nikhilbghodke avatar ketul100ms avatar dependabot[bot] avatar nikhil-sachdeva avatar ronit100ms avatar bmbshlly avatar adityaa30 avatar pratikshadake avatar geekyants-anupam-saha avatar mani-rsg avatar aditya3356 avatar akshitarora921 avatar

Stargazers

Gulzar avatar Maximilian Jendrall avatar Genius Dev avatar Ankit Kumain avatar Madhav Jha avatar Deepankar avatar avatar avatar avatar avatar avatar Aditya Thakur avatar avatar Pratish Bodhale avatar avatar avatar

Watchers

Pranjal Goswami avatar sdvd avatar avatar avatar

Forkers

triptu vaibhawkr744 hrashi100ms luisfrancisco atul107 deenan-vasan konarssuresh ravidhiman7 cosmofeed adityathakurxd fysp11 mha55any satvicmovement shivam-flipkart

web-sdks's Issues

[Bug]: ESM/CJS Compatibility

What happened?

Attempting to import either the base sdk, this sdk, or roomkit prebuilts into an ESM only environment fails with various:
SyntaxError: Cannot use import statement outside a module

Current environment is: remix.run (1.8) with vite configuration.
tsconfig is using ESNext and Bundler

Reviewing the github src with: https://publint.dev/@100mslive/[email protected]

Any chance of updating/fixing the following errors so that it works with the "Bundler" option?:

The package does not specify the "type" field. Environments may incorrectly identify a CJS file as ESM in the future. Consider adding "type": "commonjs". <-- prefer 'module' here

The types is not exported. Consider adding pkg.exports["."].require.types: "./dist/index.d.ts" to be compatible with TypeScript's "moduleResolution": "bundler" compiler option. (More info)

./dist/index.js is written in ESM, but is interpreted as CJS. Consider using the .mjs extension, e.g. ./dist/index.mjs (More info)

./dist/index.js is written in ESM, but is interpreted as CJS. Consider using the .mjs extension, e.g. ./dist/index.mjs (More info)

How can we reproduce the bug?

No response

What browsers are you seeing the problem on?

No response

[Bug]: TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

What happened?

The app crashes during the build.

Снимок экрана 2024-03-06 в 13 59 26

How can we reproduce the bug?

import { HMSPrebuilt } from '@100mslive/roomkit-react'

export default function Meets() {
return <div style={{ height: '100vh' }}>
}

` bun dev
$ next dev
▲ Next.js 14.1.2

✓ Ready in 9.4s
○ Compiling /meets ...
✓ Compiled /meets in 23.5s (5944 modules)
[HMSIntersectionObserverWrapper] IntersectionObserver is not supported, fallback will be used instead
[HMSResizeObserverWrapper] Resize Observer is not supported
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
at $c512c27ab02ef895$export$fd42f52fd3ae1109 (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-context/dist/index.module.js:12:87)
at eval (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/dist/index.module.js:30:160)
at (rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/dist/index.module.js (/Users/playra/999-web3/.next/server/vendor-chunks/@100mslive.js:3490:1)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-switch/dist/index.module.js:19:79)
at (rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-switch/dist/index.module.js (/Users/playra/999-web3/.next/server/vendor-chunks/@100mslive.js:4230:1)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/dist/chunk-LCECN6XD.js:97:80)
at (rsc)/./node_modules/@100mslive/roomkit-react/dist/chunk-LCECN6XD.js (/Users/playra/999-web3/.next/server/vendor-chunks/@100mslive.js:3120:1)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./app/meets/page.tsx:7:82)
at (rsc)/./app/meets/page.tsx (/Users/playra/999-web3/.next/server/app/meets/page.js:552:1)
at Function.webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at runNextTicks (node:internal/process/task_queues:60:5)
at listOnTimeout (node:internal/timers:540:9)
at process.processTimers (node:internal/timers:514:7)
at async eB (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:402523)
at async tt (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406237)
at async tr (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406787)
at async tr (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406918)
at async tr (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406918)
at async tl (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2057)
at async /Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2596 {
digest: '1837371966'
}
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
at $c512c27ab02ef895$export$fd42f52fd3ae1109 (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-context/dist/index.module.js:12:87)
at eval (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/dist/index.module.js:30:160)
at (rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/dist/index.module.js (/Users/playra/999-web3/.next/server/vendor-chunks/@100mslive.js:3490:1)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-switch/dist/index.module.js:19:79)
at (rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-switch/dist/index.module.js (/Users/playra/999-web3/.next/server/vendor-chunks/@100mslive.js:4230:1)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/dist/chunk-LCECN6XD.js:97:80)
at (rsc)/./node_modules/@100mslive/roomkit-react/dist/chunk-LCECN6XD.js (/Users/playra/999-web3/.next/server/vendor-chunks/@100mslive.js:3120:1)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./app/meets/page.tsx:7:82)
at (rsc)/./app/meets/page.tsx (/Users/playra/999-web3/.next/server/app/meets/page.js:552:1)
at Function.webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at runNextTicks (node:internal/process/task_queues:60:5)
at listOnTimeout (node:internal/timers:540:9)
at process.processTimers (node:internal/timers:514:7)
at async eB (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:402523)
at async tt (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406237)
at async tr (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406787)
at async tr (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406918)
at async tr (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406918)
at async tl (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2057)
at async /Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2596 {
digest: '1837371966'
}
⨯ node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-context/dist/index.module.js (5:54) @ $c512c27ab02ef895$export$fd42f52fd3ae1109
⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (./app/meets/page.tsx:7:82)
at (rsc)/./app/meets/page.tsx (/Users/playra/999-web3/.next/server/app/meets/page.js:552:1)
at Function.webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at async Promise.all (index 0)
at async Promise.all (index 0)
null
⨯ node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-context/dist/index.module.js (5:54) @ $c512c27ab02ef895$export$fd42f52fd3ae1109
⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (./app/meets/page.tsx:7:82)
at (rsc)/./app/meets/page.tsx (/Users/playra/999-web3/.next/server/app/meets/page.js:552:1)
at Function.webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at async Promise.all (index 0)
at async Promise.all (index 0)
null
⨯ node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-context/dist/index.module.js (5:54) @ $c512c27ab02ef895$export$fd42f52fd3ae1109
⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (./app/meets/page.tsx:7:82)
at (rsc)/./app/meets/page.tsx (/Users/playra/999-web3/.next/server/app/meets/page.js:552:1)
at Function.webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at async Promise.all (index 0)
at async Promise.all (index 0)
digest: "1486812798"
null
⨯ node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-context/dist/index.module.js (5:54) @ $c512c27ab02ef895$export$fd42f52fd3ae1109
⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (./app/meets/page.tsx:7:82)
at (rsc)/./app/meets/page.tsx (/Users/playra/999-web3/.next/server/app/meets/page.js:552:1)
at Function.webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at async Promise.all (index 0)
at async Promise.all (index 0)
digest: "919926608"
null
⨯ node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-context/dist/index.module.js (5:54) @ $c512c27ab02ef895$export$fd42f52fd3ae1109
⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (./app/meets/page.tsx:7:82)
at (rsc)/./app/meets/page.tsx (/Users/playra/999-web3/.next/server/app/meets/page.js:552:1)
at Function.webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
null
⨯ node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-context/dist/index.module.js (5:54) @ $c512c27ab02ef895$export$fd42f52fd3ae1109
⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (./app/meets/page.tsx:7:82)
at (rsc)/./app/meets/page.tsx (/Users/playra/999-web3/.next/server/app/meets/page.js:552:1)
at Function.webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
null
⨯ node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-context/dist/index.module.js (5:54) @ $c512c27ab02ef895$export$fd42f52fd3ae1109
⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
at $c512c27ab02ef895$export$fd42f52fd3ae1109 (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-context/dist/index.module.js:12:87)
at eval (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/dist/index.module.js:30:160)
at (rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/dist/index.module.js (/Users/playra/999-web3/.next/server/vendor-chunks/@100mslive.js:3490:1)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-switch/dist/index.module.js:19:79)
at (rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-switch/dist/index.module.js (/Users/playra/999-web3/.next/server/vendor-chunks/@100mslive.js:4230:1)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/dist/chunk-LCECN6XD.js:97:80)
at (rsc)/./node_modules/@100mslive/roomkit-react/dist/chunk-LCECN6XD.js (/Users/playra/999-web3/.next/server/vendor-chunks/@100mslive.js:3120:1)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./app/meets/page.tsx:7:82)
at (rsc)/./app/meets/page.tsx (/Users/playra/999-web3/.next/server/app/meets/page.js:552:1)
at Function.webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at runNextTicks (node:internal/process/task_queues:60:5)
at listOnTimeout (node:internal/timers:540:9)
at process.processTimers (node:internal/timers:514:7)
at async eB (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:402523)
at async tt (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406237)
at async tr (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406787)
at async tr (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406918)
at async tr (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406918)
at async tl (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2057)
at async /Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2596 {
digest: '1837371966',
page: '/meets'
}
null
⨯ node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-context/dist/index.module.js (5:54) @ $c512c27ab02ef895$export$fd42f52fd3ae1109
⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
at $c512c27ab02ef895$export$fd42f52fd3ae1109 (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-context/dist/index.module.js:12:87)
at eval (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/dist/index.module.js:30:160)
at (rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-label/dist/index.module.js (/Users/playra/999-web3/.next/server/vendor-chunks/@100mslive.js:3490:1)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-switch/dist/index.module.js:19:79)
at (rsc)/./node_modules/@100mslive/roomkit-react/node_modules/@radix-ui/react-switch/dist/index.module.js (/Users/playra/999-web3/.next/server/vendor-chunks/@100mslive.js:4230:1)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./node_modules/@100mslive/roomkit-react/dist/chunk-LCECN6XD.js:97:80)
at (rsc)/./node_modules/@100mslive/roomkit-react/dist/chunk-LCECN6XD.js (/Users/playra/999-web3/.next/server/vendor-chunks/@100mslive.js:3120:1)
at webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./app/meets/page.tsx:7:82)
at (rsc)/./app/meets/page.tsx (/Users/playra/999-web3/.next/server/app/meets/page.js:552:1)
at Function.webpack_require (/Users/playra/999-web3/.next/server/webpack-runtime.js:33:43)
at runNextTicks (node:internal/process/task_queues:60:5)
at listOnTimeout (node:internal/timers:540:9)
at process.processTimers (node:internal/timers:514:7)
at async eB (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:402523)
at async tt (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406237)
at async tr (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406787)
at async tr (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406918)
at async tr (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406918)
at async tl (/Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2057)
at async /Users/playra/999-web3/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2596 {
digest: '1837371966',
page: '/meets'
}
null
○ Compiling /_error ...
`

What browsers are you seeing the problem on?

Chrome

[Bug]: Build Bug on Amazon

What happened?

Uncaught (in promise) TypeError: Failed to resolve module specifier "@100mslive/roomkit-web". Relative references must start with either "/", "./", or "../".

How can we reproduce the bug?

No response

What browsers are you seeing the problem on?

No response

[Bug]: ReferenceError: Worker is not defined

What happened?

Can't build my NextJS website when using the <HMSPrebuilt /> component

bun run build
$ next build
  ▲ Next.js 14.2.2
  - Environments: .env

   Creating an optimized production build ...
 ⚠ Compiled with warnings

../../node_modules/effects-sdk/tsvb.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
../../node_modules/effects-sdk/tsvb.js
../../node_modules/@100mslive/hms-virtual-background/dist/index.js
../../node_modules/@100mslive/roomkit-react/dist/chunk-GTJZFIWX.js
../../node_modules/@100mslive/roomkit-react/dist/index.js
./app/page.tsx

../../node_modules/effects-sdk/tsvb.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
../../node_modules/effects-sdk/tsvb.js
../../node_modules/@100mslive/hms-virtual-background/dist/index.js
../../node_modules/@100mslive/roomkit-react/dist/chunk-GTJZFIWX.js
../../node_modules/@100mslive/roomkit-react/dist/index.js
./app/page.tsx

../../node_modules/effects-sdk/tsvb.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
../../node_modules/effects-sdk/tsvb.js
../../node_modules/@100mslive/hms-virtual-background/dist/index.js
../../node_modules/@100mslive/roomkit-react/dist/chunk-GTJZFIWX.js
../../node_modules/@100mslive/roomkit-react/dist/index.js
./app/page.tsx

../../node_modules/effects-sdk/tsvb.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
../../node_modules/effects-sdk/tsvb.js
../../node_modules/@100mslive/hms-virtual-background/dist/index.js
../../node_modules/@100mslive/roomkit-react/dist/chunk-GTJZFIWX.js
../../node_modules/@100mslive/roomkit-react/dist/index.js
./app/page.tsx

../../node_modules/effects-sdk/tsvb.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
../../node_modules/effects-sdk/tsvb.js
../../node_modules/@100mslive/hms-virtual-background/dist/index.js
../../node_modules/@100mslive/roomkit-react/dist/chunk-GTJZFIWX.js
../../node_modules/@100mslive/roomkit-react/dist/index.js
./app/page.tsx

../../node_modules/effects-sdk/tsvb.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
../../node_modules/effects-sdk/tsvb.js
../../node_modules/@100mslive/hms-virtual-background/dist/index.js
../../node_modules/@100mslive/roomkit-react/dist/chunk-GTJZFIWX.js
../../node_modules/@100mslive/roomkit-react/dist/index.js
./app/page.tsx


warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
 ⚠ Compiled with warnings

../../node_modules/effects-sdk/tsvb.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
../../node_modules/effects-sdk/tsvb.js
../../node_modules/@100mslive/hms-virtual-background/dist/index.js
../../node_modules/@100mslive/roomkit-react/dist/chunk-GTJZFIWX.js
../../node_modules/@100mslive/roomkit-react/dist/index.js
./app/page.tsx

../../node_modules/effects-sdk/tsvb.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
../../node_modules/effects-sdk/tsvb.js
../../node_modules/@100mslive/hms-virtual-background/dist/index.js
../../node_modules/@100mslive/roomkit-react/dist/chunk-GTJZFIWX.js
../../node_modules/@100mslive/roomkit-react/dist/index.js
./app/page.tsx

../../node_modules/effects-sdk/tsvb.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
../../node_modules/effects-sdk/tsvb.js
../../node_modules/@100mslive/hms-virtual-background/dist/index.js
../../node_modules/@100mslive/roomkit-react/dist/chunk-GTJZFIWX.js
../../node_modules/@100mslive/roomkit-react/dist/index.js
./app/page.tsx

../../node_modules/effects-sdk/tsvb.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
../../node_modules/effects-sdk/tsvb.js
../../node_modules/@100mslive/hms-virtual-background/dist/index.js
../../node_modules/@100mslive/roomkit-react/dist/chunk-GTJZFIWX.js
../../node_modules/@100mslive/roomkit-react/dist/index.js
./app/page.tsx

../../node_modules/effects-sdk/tsvb.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
../../node_modules/effects-sdk/tsvb.js
../../node_modules/@100mslive/hms-virtual-background/dist/index.js
../../node_modules/@100mslive/roomkit-react/dist/chunk-GTJZFIWX.js
../../node_modules/@100mslive/roomkit-react/dist/index.js
./app/page.tsx

../../node_modules/effects-sdk/tsvb.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
../../node_modules/effects-sdk/tsvb.js
../../node_modules/@100mslive/hms-virtual-background/dist/index.js
../../node_modules/@100mslive/roomkit-react/dist/chunk-GTJZFIWX.js
../../node_modules/@100mslive/roomkit-react/dist/index.js
./app/page.tsx

 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (0/5)  [=   ][HMSIntersectionObserverWrapper] IntersectionObserver is not supported, fallback will be used instead
[HMSResizeObserverWrapper] Resize Observer is not supported
ReferenceError: Worker is not defined
    at 376 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:127:8301)
    at I8 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:179:13670)
    at 75 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:127:4373)
    at I8 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:179:13670)
    at 62 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:127:741)
    at I8 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:179:13670)
    at /Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:179:13770
    at 7778 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:179:13792)
    at t (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/webpack-runtime.js:1:143)
    at 1909 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:1:56128) {
  digest: '1970210710'
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: Worker is not defined
    at 376 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:127:8301)
    at I8 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:179:13670)
    at 75 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:127:4373)
    at I8 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:179:13670)
    at 62 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:127:741)
    at I8 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:179:13670)
    at /Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:179:13770
    at 7778 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:179:13792)
    at t (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/webpack-runtime.js:1:143)
    at 1909 (/Users/luispe/Repos/ultradrop-app/apps/live/.next/server/app/page.js:1:56128)
 ✓ Generating static pages (5/5)

How can we reproduce the bug?

I'm just using this:

"use client";

import { CLIENT_ENV } from '@/clientEnvs';
import { HMSPrebuilt } from '@100mslive/roomkit-react';

export default function Home() {
    return (
        <div style={{ height: '100vh' }}>
            <HMSPrebuilt roomCode={CLIENT_ENV.ROOM_CODE} />
        </div>
    );
}

with:

{
  "name": "live",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start --port 3103",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.2"
  },
  "devDependencies": {
    "typescript": "^5",
    "@100mslive/roomkit-react": "^0.3.8",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "eslint": "^8",
    "eslint-config-next": "14.2.2"
  }
}

What browsers are you seeing the problem on?

No response

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.