ReferenceError: Worker is not defined

[Riezmann]

Hi, I have recently tried to use this package in react 18, but I got an error called "Worker is not defined".

Here is the package.json:
[...] "dependencies": { "next": "12.2.3", "react": "18.2.0", "react-dom": "18.2.0", "react-icons": "^4.4.0", "react-media-recorder": "^1.6.6" }, "devDependencies": { "@types/node": "18.6.3", "@types/react": "18.0.15", "@types/react-dom": "18.0.6", "eslint": "8.21.0", "eslint-config-next": "12.2.3", "typescript": "4.7.4" } }
And the element I put the record in is:

    <p>{status}</p>

    <button onClick={startRecording}>Start Recording</button>

    <button onClick={stopRecording}>Stop Recording</button>

    <video src={mediaBlobUrl} controls autoPlay loop />

[durdenx]

Any solution?

[iisalazar]

Error also exists on my end. Here's package.json dependencies. I'm using Nextjs with React 18

{
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.11",
    "@mui/lab": "^5.0.0-alpha.124",
    "@mui/material": "^5.11.15",
    "axios": "^1.3.4",
    "eslint": "8.37.0",
    "eslint-config-next": "13.2.4",
    "next": "13.2.4",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-media-recorder": "^1.6.6",
    "styled-components": "^5.3.9",
    "uuid": "^9.0.0",
    "zustand": "^4.3.7"
  }

[danielwii]

try this in nextjs:

const ReactMediaRecorder = dynamic(() => import('react-media-recorder').then((mod) => mod.ReactMediaRecorder), {
  ssr: false,
});

[609harsh]

ReferenceError: dynamic is not defined
getting this error in next js.
Any help on this?

[MrJooka]

ReferenceError: dynamic is not defined getting this error in next js. Any help on this?

need to import dynamic from "next/dynamic".

import dynamic from "next/dynamic";

[shashi2602]

try this in nextjs:

const ReactMediaRecorder = dynamic(() => import('react-media-recorder').then((mod) => mod.ReactMediaRecorder), {
  ssr: false,
});

then how we can import this useReactMediaRecorder hook if we get the same error

[kabtamu-degifie]

Here is my solution for hooks related to useReactMediaRecorder or class-base too:

Assume we have a custom component called CustomMediaRecorder that uses useReactMediaRecorder. We want to use this component in the current component.

 const CustomMediaRecorder = dynamic(
  () => import('..../CustomMediaRecorder'),
  {
    ssr: false,
  }
);

NB. CustomMediaRecorder can be a class-based or functional component. Import it into your current component like the code snippet above shows.

[rorlich]

what is the solution for Remix based projects?

[iwan933]

@rorlich since the workaround seems to exclude the part from rendering on server side, you can use the client side rendering of Remix. See here https://remix.run/resources/remix-utils#clientonly

[rorlich]

got it, thanks

…

On Tue, Jan 30, 2024 at 2:39 PM iwan933 ***@***.***> wrote: @rorlich <https://github.com/rorlich> since the workaround seems to exclude the part from rendering on server side, you can use the client side rendering of Remix. See here https://remix.run/resources/remix-utils#clientonly — Reply to this email directly, view it on GitHub <#107 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABEGVOYWSNN2XQ2JMCFUEX3YRDSY5AVCNFSM552PJ6LKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJRGY3TKNZXHA3A> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[kubi-ozisik]

How do we get the hook? useMediaRecorder? I am trying to do it with below code to set the state. But it never works. Any suggestions?

useEffect(() => { import("..").then((module) => { const { useReactMediaRecorder } = module; setUseMediaRecorder(useReactMediaRecorder); }); }, []);

[ChenAlmost]

I solve this problem by dynamic import the component A containing useMediaRecorder

const componentA = dynamic(() => import('@/components/a').then((mod) => mod.default), { ssr: false, });

[gamrom]

add
'use client'

top of the component.
Is it solve?

[lagupa]

add 'use client'

top of the component. Is it solve?

That did the trick for me...😃

[robbinzoomers]

How do we get the hook? useMediaRecorder? I am trying to do it with below code to set the state. But it never works. Any suggestions?

useEffect(() => { import("..").then((module) => { const { useReactMediaRecorder } = module; setUseMediaRecorder(useReactMediaRecorder); }); }, []);

Does anyone has this working in NextJS and has an example of it? I'm getting an Unhandled Runtime Error. 🙁 I can get the react-media-recorder working in my local environment, but every time I'm deploying to Vercel it fails.

[amirmahdioun]

same error with nextjs
worker is not defined error on build

[hdrabs]

I am using NextJS 14.1.1.

What I did was created a separate component for AudioRecording named AudioRecording.tsx having 'use client' on the top.

Imported this component dynamically

import dynamic from "next/dynamic";

const AudioRecorder = dynamic(() => import("./AudioRecorder"), { ssr: false });

And used it like

<AudioRecorder
  onRecordingComplete={(file) =>
    // my state update
  }
  isRecording={false}
/>

and I got it to work without giving build time errors