解决NextJS14 TS中导入MP3时的“Module parse failed”错误

1. 关于file-loader的使用 #

webpack 5之后已经用Asset Modules取代了file-loader、url-loader这类loader，而且NextJS本身内置了静态资源处理逻辑，没必要单独用file-loader——这也是你配置后没生效的核心原因：NextJS不会读取根目录的webpack.config.js，而是需要在next.config.js里扩展webpack配置。

2. 正确的配置步骤 #

第一步：创建/修改next.config.js

在项目根目录创建（如果不存在）next.config.js，添加MP3文件的处理规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 添加MP3文件的webpack处理规则
    config.module.rules.push({
      test: /\.mp3$/,
      type: 'asset/resource', // 替代file-loader的webpack5原生方案
      generator: {
        filename: 'static/audio/[hash][ext][query]' // 自定义输出路径，可按需修改
      }
    });
    return config;
  }
};

module.exports = nextConfig;

第二步：添加TypeScript类型声明（必做）

TypeScript无法识别MP3模块类型，需要在项目根目录创建types/mp3.d.ts文件：

declare module '*.mp3' {
  const src: string;
  export default src;
}

然后在tsconfig.json的include数组中加入该类型文件，确保TS能识别：

{
  "include": ["types/**/*.d.ts", "app/**/*", "components/**/*"]
}

第三步：正常导入使用MP3

在app/page.tsx中导入MP3并传入组件：

import clickSound from '@/public/sounds/click.mp3'; // 假设MP3放在public/sounds下
import AudioButton from '@/components/AudioButton';

export default function Home() {
  return (
    <main>
      <AudioButton audioSrc={clickSound} />
    </main>
  );
}

AudioButton组件示例：

interface AudioButtonProps {
  audioSrc: string;
}

export default function AudioButton({ audioSrc }: AudioButtonProps) {
  const playAudio = () => {
    const audio = new Audio(audioSrc);
    audio.play().catch(err => console.error(err));
  };

  return <button onClick={playAudio}>点击播放</button>;
}

3. 更简化的方案：直接引用public路径 #

如果MP3文件放在public目录下，完全不需要webpack配置，直接用根相对路径传入组件即可：

// app/page.tsx
import AudioButton from '@/components/AudioButton';

export default function Home() {
  return (
    <main>
      <AudioButton audioSrc="/sounds/click.mp3" />
    </main>
  );
}

这种方式NextJS会自动处理静态资源的打包和路径映射，适合简单场景。

内容的提问来源于stack exchange，提问作者omgitskuei