Error with ffmpeg.wasm + Next.js
Unanswered
Siamese Crocodile posted this in #help-forum
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
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