reactjs - React Nextjs : Module parse failed:You may need an appropriate loader to handle this file type, 当前没有配置加载器来处理这个文件

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，则可以使用新的 Assets 模块:

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

(原始加载程序替换)

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

(文件加载器替换)

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