Module not found error with ffmpeg.wasm in Next.js app?

[lancejpollard]

I am getting this in Next.js 14.11 canary:

./node_modules/.pnpm/@[email protected]/node_modules/@ffmpeg/ffmpeg/dist/esm/classes.js:104:27 Module not found   102 |         if (!this.#worker) {   103 |             this.#worker = classWorkerURL ? > 104 |                 new Worker(new URL(classWorkerURL, import.meta.url), {       |                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   105 |                     type: "module",   106 |                 }) :   107 |                 // We need to duplicated the code here to enable webpack  https://nextjs.org/docs/messages/module-not-found console.error @ [root of the server]__4fd2df._.js:12197

I followed along https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/nextjs-app and https://ffmpegwasm.netlify.app/docs/getting-started/usage, and this happens when I try and load the Next.js app importing the modules. Any ideas?

[lancejpollard]

Update, I noticed the https://unpkg.com/browse/@ffmpeg/[email protected]/dist/umd/ is 0.12.6, so I downgraded to that for the node module @ffmpeg/ffmpeg, and it seems to load now, instead of 0.12.10.

Now that it's starting to load, the await ffmpeg.load function is not returning, given these toBlobUrls:

• blob:http://localhost:3001/f08a940f-3bea-4412-b39f-67b66e3662cb
• blob:http://localhost:3001/c1921c3f-2e22-4875-9cb7-74b13d2f3cdd

Those throw error pages in my Next.js, should I point to a real URL?

I changed it to be:

• http://localhost:3001/ffmpeg.core.wasm
• http://localhost:3001/ffmpeg.core.js

But it still not loading. Though when I visit that path in the browser, that is what I saved it as and it shows up.

[radioman09]

update line 104 with:
Object(import.meta).url

That's what worked for me.