I am relatively new to using webpack for my projects. Recently, I wanted to incorporate a feature that involved displaying PDFs. After some research, I came across the "react-pdf" library and decided to give it a try. While everything worked smoothly in a test project created with create-react-app, I encountered errors when implementing it into a real project built with Nextjs.
import placeholder from "../src/placeholder.pdf"
Upon server reload, I consistently received the following error message: * 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 how my webpack configuration looks:
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'
};
I'm struggling to identify what might be causing this issue. Any insights or suggestions would be greatly appreciated!