NextJS项目导入PDF文件出现Module parse failed错误如何解决？

报错原因 #

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type

该报错是因为Webpack默认仅支持处理JS、JSON类文件，没有配置PDF二进制文件的解析规则，无法识别你导入的PDF资源，需要新增对应资源处理规则即可解决。

方案1：Webpack 5.x 版本配置（无需额外安装依赖） #

Webpack 5 内置了资源模块（Asset Modules），直接修改项目的webpack.config.js配置文件的module.rules数组即可：

// webpack.config.js
module.exports = {
  // 其他原有配置保持不变
  module: {
    rules: [
      // 其他已有loader规则保持不变
      {
        test: /\.pdf$/,
        type: 'asset/resource',
        generator: {
          // 可选配置：自定义打包后PDF文件的输出路径和命名规则
          filename: 'pdf/[name].[hash][ext]'
        }
      }
    ]
  }
}

配置完成后重启项目，原有import file from '../public/pdf/front.pdf'语句即可正常执行，导入的file变量就是打包后的PDF文件访问路径。

方案2：Webpack 4.x 及更低版本配置 #

需要先安装file-loader依赖：

npm install file-loader --save-dev
# 或使用yarn
yarn add file-loader -D

再修改webpack.config.js的module.rules配置：

// webpack.config.js
module.exports = {
  // 其他原有配置保持不变
  module: {
    rules: [
      // 其他已有loader规则保持不变
      {
        test: /\.pdf$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'pdf/[name].[hash].[ext]'
            }
          }
        ]
      }
    ]
  }
}

框架封装场景补充 #

如果你使用Vue CLI、Create React App这类封装了Webpack配置的框架，不需要直接修改webpack.config.js，按框架对应的扩展配置方式添加上述PDF规则即可：

• Vue CLI：在vue.config.js的configureWebpack或chainWebpack字段中添加对应规则
• Create React App：可以执行npm run eject暴露内置配置后修改，也可以用react-app-rewired等工具扩展配置

内容的提问来源于stack exchange，提问作者Jonathan Jeshua Laniba