Resolving "Module parse failed" error importing MP3s in NextJS14 TS?

Question

I started a fresh NextJS project with; npx create-next-app@latest.

And created a simple TSX component that takes an imported MP3 file as prop.

'use client';

import Image from "next/image";
import audioIcon from "@/public/logo/audio.png"

type Props = {
    label: string,
    sound: string,
}
export default function AudioButton({
    label,
    sound,
}: Props) {
    function play() {
        new Audio(sound).play();
    }

    return <button
        onClick={play}>
            <Image src={audioIcon} alt={label}></Image>
            {label}
    </button>;
}

The main /app/page.tsx calls this AudioButton and passes it a MP3 file

    import sound from "@/public/pronunciation/name.mp3"
    import AudioButton from "./components/Buttons/AudioButton";

    export default function Home() {
        return (
        <main className={styles.main}>
            <div className={styles.description}>
                <p>
                    <AudioButton label={"Play"} sound={sound}></AudioButton>
                </p>
            </div>
        </main>
    );}

On build, the following error is thrown:

Module parse failed: Unexpected character '♦' (1:3) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

Import trace for requested module: ./public/pronunciation/name.mp3 ./app/page.tsx

From reading https://webpack.js.org/concepts#loaders, I get I need to make a webpack.config.js file in the same directory as /app and /public, but it's unclear to me what the contents of the file should be.

Is File loader the correct loader to use to handle MP3? What should the contents look like for the webpack.config.js file?

I tried this so far:

@/webpack.config.js

    module.exports = {
        module: {
            rules: [
                {
                    test: /\.(mp3|gif)$/i,
                    use: [
                        {
                            loader: 'file-loader',
                        },
                    ],
                },
            ],
        },
    };

This results in the same error.

Answer 1

https://stackoverflow.com/a/78034291/23364932 Answered somewhere else - same solution, change the src syntax from using an import statement:

import sound from "@/public/pronunciation/name.mp3"

to an inline string where root is the /public assets folder

// import sound from "@/public/pronunciation/name.mp3"
import AudioButton from "./components/Buttons/AudioButton";

export default function Home() {
    return (
    <main className={styles.main}>
        <div className={styles.description}>
            <p>
                <AudioButton label={"Play"} 
                    {/* sound={sound} */}
                    sound={"/pronunciation/name.mp3"}
                 ></AudioButton>
            </p>
        </div>
    </main>
);}