I'm currently working with [email protected] and webpack v5 and got stuck for hours with fixing mp3 loading. I tried several other solutions from stack and GitHub. None of them worked for me.

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 .%       

Here is my last configuration for 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
    }
}

CodePudding user response：

There is no need to import such files. Next.js supports putting the assets in public folder. Remove your custom webpack configuration and then simply do this:

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

Refer: 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 (/).

Also, the error that you were getting was a TypeError, to fix it you can try:

// types/sounds.d.ts

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

Refer: Importing Other Assets | TypeScript - webpack