解决在 NextJS14 TS 中导入 MP3 时出现“模块解析失败”错误？

Question

我开始了一个新的 NextJS 项目；

npx create-next-app@latest

。

并创建了一个简单的 TSX 组件，它将导入的 MP3 文件作为道具。

'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>;
}

主 /app/page.tsx 调用此 AudioButton 并向其传递一个 MP3 文件

    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>
    );}

构建时，抛出以下错误：

模块解析失败：意外的字符“♦”(1:3) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders （此二进制文件省略源代码）

导入请求模块的跟踪： ./public/发音/姓名.mp3 ./app/page.tsx

通过阅读https://webpack.js.org/concepts#loaders，我知道我需要在与

webpack.config.js

和

/app

相同的目录中创建一个

/public

文件，但我不清楚它是什么文件的内容应该是。

文件加载器是用于处理 MP3 的正确加载器吗？ webpack.config.js 文件的内容应该是什么样的？

到目前为止我已经尝试过了：

@/webpack.config.js

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

这会导致同样的错误。

Answer 1

https://stackoverflow.com/a/78034291/23364932 在其他地方回答 - 相同的解决方案，使用 import 语句更改 src 语法：

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

到内联字符串，其中 root 是 /public 资产文件夹

// 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>
);}