Converting MP3/MP4 to WAV in the Frontend Using ffmpegwasm with Next.js Results in Module Not Found Error

Question

I'm attempting to use ffmpegwasm in a Next.js project to convert MP3 or MP4 files to WAV format directly in the frontend. However, I encounter a "Module not found" error during the process. I have made sure to use the latest version of Next.js. Below is the error message and the code snippet where the issue occurs. I'm seeking assistance to resolve this problem, as it has become quite troubling.

error

./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

"use client"

import { FFmpeg } from "@ffmpeg/ffmpeg"
import { fetchFile, toBlobURL } from "@ffmpeg/util"
import React, { useEffect, useRef, useState } from "react"

export default function TestPage() {
  const [loaded, setLoaded] = useState(false)
  const ffmpegRef = useRef(new FFmpeg())
  const messageRef = useRef(null)

  useEffect(() => {
    load()
  }, [])

  const load = async () => {
    const baseURL = "https://unpkg.com/@ffmpeg/[email protected]/dist/umd"
    const ffmpeg = ffmpegRef.current
    ffmpeg.on("log", ({ message }) => {
      if (messageRef.current) messageRef.current.innerHTML = message
      console.log(message)
    })

    await ffmpeg.load({
      coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
      wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
    })
    setLoaded(true)
  }

  const convertToWav = async ({ target: { files } }) => {
    const ffmpeg = ffmpegRef.current
    const file = files[0]

    await ffmpeg.writeFile("input.mp4", await fetchFile(file))
    await ffmpeg.exec(["-i", "input.mp4", "output.wav"])
    const data = await ffmpeg.readFile("output.wav")

    const url = URL.createObjectURL(new Blob([data.buffer], { type: "audio/wav" }))
    const link = document.createElement("a")
    link.href = url
    link.setAttribute("download", "output.wav")
    document.body.appendChild(link)
    link.click()
  }

  return (
    <div>
      {loaded ? (
        <>
          <input type="file" onChange={convertToWav} accept="audio/mp3,video/mp4" />
          <p ref={messageRef}></p>
        </>
      ) : (
        <button onClick={load}>Load ffmpeg-core</button>
      )}
    </div>
  )
}

Attempted Solutions:

I've ensured that I'm using the latest version of Next.js. I've tried various configurations for the ffmpeg instance.

Questions:

How can I resolve the "Module not found" error when using ffmpegwasm with Next.js? Are there any specific configurations or setups within Next.js that I need to be aware of to successfully use ffmpegwasm? Any guidance or assistance with this issue would be greatly appreciated. Thank you in advance for your help.