Next.jsでMP3ファイルをimportしたい

Question

実現したいこと

・Next.jsでMP3ファイルをimportしたい。

前提

React、Next.jsを使ってタイマーアプリを作っています。

その際にMP3音源を使いたく、MP3ファイルをimportしようしているのですが、以下のようなエラーが出てimportできません。

正しくMP3ファイルをimportするための方法や、MP3を再生するための別の方法等ございましたら教えていただけますと幸いです。

よろしくお願いいたします。

発生している問題・エラーメッセージ

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

該当のソースコード

import timerSound from "@/audio/timer.mp3";
...中略...
const audioTimer = new Audio({timerSound});
...中略...
audioTimer.play();

---以下、next.config.jsに追加してみたルールです---
const nextConfig = {
   module: {
      rules: [
        {
          test: /\.mp3$/,
          use: [
            {
              loader: 'file-loader',
            },
          ],
        },
      ],
    },
};

試したこと

個人的にエラーの原因等を調べてみたところ、MP3ファイルの形式が認識されていないかMP3のファイルタイプにローダーを構成していないという原因が考えられたので、
file-loaderをインストールし、MP3ファイルを処理する上記のようなルールを「next.config.js」に追加してみました。

補足情報（FW/ツールのバージョンなど）

"react": "^18",
"next": "14.0.4",
"file-loader": "^6.2.0",

Comments

[退会済みユーザー]

これですか？
https://github.com/vercel/next.js/discussions/12810

[退会済みユーザー]

import timerSound from "@/audio/timer.mp3";
// ...中略...
const audioTimer = new Audio(timerSound);
// ...中略...
audioTimer.play();

｛｝が不要では？

[shin_jrjr]

貼って頂いたurl先に載っていたnext.config.jsのコードを参考にurl-loaderを使用することで、無事解決しました！！

プログラミング初心者で質問するのも初めてだったので曖昧な点が多かったかと思いますが、ご回答いただき本当にありがとうございました！！🙇😊

[退会済みユーザー]

解決おめでとうございます！
解決方法をまとめて、「自己解決」として回答してください！
同じように困っている人の貴重な情報になると思います。

[shin_jrjr]

おっしゃる通り{}を付けていたのもエラーの原因でした。。。
こちらも改善することで問題なく動作しました！
ご丁寧にありがとうございました🙇🙇

Answer 1

【問題解決のために修正したこと】

・file-loaderではなくurl-loaderに変更
・「npm install url-loader --save-dev」でインストールし、next.config.jsに以下のコードを記述することでurl-loaderを追加

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.(ogg|mp3|wav|mpe?g)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      ],
    });
    return config;
  },
};

・{}を取り除き、
const audioTimer = new Audio(timerSound);
に修正

【参考にしたurl】

https://github.com/vercel/next.js/discussions/12810