Next.js Discord

Discord Forum

Error with ffmpeg.wasm + Next.js

Unanswered
Siamese Crocodile posted this in #help-forum
Open in Discord
Siamese CrocodileOP
I create new Next.js app, use { FFmpeg } from "@ffmpeg/ffmpeg" like in example in doc and have an error. I add my code and error screenshot. Please help me.
My dependencies:
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@ffmpeg/ffmpeg": "^0.12.15",
"@ffmpeg/util": "^0.12.2",
"@mui/material": "^6.4.4",
"next": "15.1.7",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-player": "^2.16.0"
}

My Home.tsx component:

"use client";

import { FFmpeg } from "@ffmpeg/ffmpeg";
import { useRef } from "react";

export default function Home() {
const ffmpegRef = useRef(new FFmpeg());

return <div>Hello</div>;
}

My NoSSRWrapper.tsx component:

import dynamic from "next/dynamic";
import React from "react";

const NoSSRWrapper = (props) => (
<React.Fragment>{props.children}</React.Fragment>
);
export default dynamic(() => Promise.resolve(NoSSRWrapper), {
ssr: false,
});

My page.tsx component:

"use client";

import Home from "./Home";
import NoSSRWrapper from "./NoSSRWrapper";

export default function Page() {
return (
<NoSSRWrapper>
<Home />
</NoSSRWrapper>
);
}

Error

0 Replies