Webpack Cannot load pdf file: Module parse failed You may need an appropriate loader to handle this file type

Question

I am new to webpack. Recently, I wanted to find a way to view pdfs in one of my projects. I have found out a library called "react-pdf" ( https://www.npmjs.com/package/react-pdf ) and decided to experiment with it. When using it in a test react project (npx create-react-app), everything worked fine, but when I to introduced it to the real project, using Nextjs, things went wrong.

import placeholder from "../src/placeholder.pdf""

Every time the server reloads I get this error: * error -./assets/pdf/placeholder.pdf Module parse failed: Unexpected token (1:0) 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 (Source code omitted for this binary file)*

This is the webpack config:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.pdf$/i,
                type: 'asset/resource',
                generator: {
                    filename: `[name][ext]`
                }
            }
        ],
    },
    mode: 'development'
};

What am I doing wrong?

Answer 1

next.config.js

module.exports = {
    webpack: (config, options) =>
    {
        config.module.rules.push({
            test: /\.pdf$/i,
            type: 'asset/source'
        })

        return config
    },
}