带有 Nextjs 的 Webpack 5 中的 mp3 文件

Question

我目前正在使用 next@11.1.2 和 webpack v5，并且在修复 mp3 加载时陷入了数小时的困境。我尝试了堆栈和 GitHub 中的其他几种解决方案。 None 其中对我有用。

Type error: Cannot find module 'public/sounds/bighit.mp3' or its corresponding type declarations.

  14 | 
  15 | // Assets
> 16 | import sound_bighit from "public/sounds/bighit.mp3"
     |                          ^
info  - Checking validity of types .%

这是我对 webpack 的最后配置：

const path = require('path')
const SRC = path.resolve(__dirname, 'public/sounds/')

module.exports = {
    webpack: (config, { }) => {

        config.module.rules.push({
            test: /\.mp3$/,
            incluse: SRC,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[contenthash].[ext]',
                    outputPath: 'public/sounds/',
                    publicPath: 'public/sounds/'
                }
            }

        })

        // config.module.rules.push({
        //     test: /\.mp3$/,
        //     use: {
        //         loader: 'file-loader',
        //     },
        // })

        // config.module.rules.push({
        //     test: /\.mp3/,
        //     use: {
        //         loader: 'url-loader',
        //     },
        // })

        return config
    }
}

Answer 1

无需导入此类文件。 Next.js 支持将资源放在 public 文件夹中。删除您的自定义 webpack 配置，然后只需执行以下操作：

<audio controls src="/sounds/bighit.mp3" />

参考：Static File Serving

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

此外，您遇到的错误是 TypeError，要修复它，您可以尝试：

// types/sounds.d.ts

declare module "*.mp3" {
  const content: string;
  export default content;
}

参考：Importing Other Assets | TypeScript - webpack

带有 Nextjs 的 Webpack 5 中的 mp3 文件

mp3 files in Webpack 5 w/ Nextjs

typescript

reactjs

webpack

next.js

webpack-5