Next.js 14 + TypeScript项目导入WAV音频文件报错求助

你遇到的错误是因为Webpack没有配置对应的加载器来处理.wav这类二进制音频文件，之前添加的TypeScript类型声明只是解决了类型检查问题，无法处理文件解析的底层问题。下面提供两种可行的解决方案：

方案一：配置Webpack处理音频资源（适合音频放在src目录的场景） #

1. 修改next.config.js #

在项目根目录创建或更新next.config.js，添加Webpack规则来解析音频文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 添加音频文件处理规则
    config.module.rules.push({
      test: /\.(wav|mp3|ogg)$/,
      type: 'asset/resource',
      generator: {
        filename: 'static/sounds/[name].[hash][ext]'
      }
    });
    return config;
  }
};

module.exports = nextConfig;

这里用了Webpack 5内置的asset/resource模块，无需额外安装第三方加载器，它会将音频文件输出到指定目录，并返回文件的URL路径。

2. 优化类型声明（可选） #

将types/asset.d.ts中的类型从any改为string，让类型更准确：

declare module "*.wav" {
  const value: string;
  export default value;
}

方案二：将音频放在public目录（更简单，无需配置Webpack） #

这是Next.js处理静态资源的推荐方式：

1. 在项目根目录创建public/sound文件夹，把click.wav和gameover.wav放入其中；
2. 修改代码，直接通过相对路径创建Audio对象，无需import：

const gameOverSoundOfApp = new Audio('/sound/gameover.wav');
const gameClickSoundOfApp = new Audio('/sound/click.wav');

gameOverSoundOfApp.volume = 0.2;
gameClickSoundOfApp.volume = 0.5;

React.useEffect(() => {
    if (gameState.some((row: any) => row.some((tile: any) => tile !== null))) {
        gameClickSoundOfApp.play();
    }
}, [gameState]);

这种方式下，Next.js会自动托管public目录下的资源，无需额外配置，代码更简洁。

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