React Nextjs:模块解析失败:您可能需要一个合适的加载程序来处理此文件类型，目前没有配置任何加载程序处理此文件

Question

我正在尝试加载pdf文件

import placeholder from "../assets/pdf/placeholder.pdf"

每次服务器重新加载时，我都会收到以下错误：*错误-/assets/pdf/placeholder.pdf模块分析失败：意外的令牌(1:0(您可能需要一个适当的加载器来处理此文件类型，目前没有配置任何加载器来处理该文件。看见https://webpack.js.org/concepts#loaders(此二进制文件省略了源代码(*

Answer 1

如果您正在使用Webpack4，则似乎需要raw-loader

https://v4.webpack.js.org/loaders/raw-loader/

{
test: /.pdf$/i,
use: 'raw-loader',
}

如果您正在使用Webpack5，则可以使用新的资产模块：

https://webpack.js.org/guides/asset-modules/

(原始装载机更换(

{
test: /.pdf$/i
type: 'asset/source'
}

(文件加载程序替换(

{
test: /.pdf$/i
type: 'asset/resource',
generator: {
filename: `[name][ext]`
}
}