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?
next.config.js
module.exports = {
webpack: (config, options) =>
{
config.module.rules.push({
test: /\.pdf$/i,
type: 'asset/source'
})
return config
},
}