[Bug]: ReferenceError: Worker is not defined

lpbonomi commented 4 months ago

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

raviteja83 commented 4 months ago

@lpbonomi can you please share a codesandbox for the repro. will look into it.

lpbonomi commented 4 months ago

Hi @raviteja83, I've uploaded the repro to codesandbox. You just have to try to build the project to see the error:

https://codesandbox.io/p/github/lpbonomi/100ms-repro/main

Thanks :)

raviteja83 commented 4 months ago

@lpbonomi

import dynamic from 'next/dynamic'
const HMSPrebuilt = dynamic(() => import('@100mslive/roomkit-react').then(res => res.HMSPrebuilt), { ssr: false });

Please try importing the component like this.

lpbonomi commented 4 months ago

Hi @raviteja83, had to add the "use client" at the top but it works! Thank you so much for your help :)

100mslive / web-sdks