Angular项目使用pdfjs-dist时出现模块解析失败错误

问题描述 #

执行ng serve时触发以下错误：

Error: ./node_modules/pdfjs-dist/build/pdf.js 1413:9
Module parse failed: Unexpected character '#' (1413:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

当前使用的依赖版本：

"@types/pdfjs-dist": "2.1.6",
    "pdfjs-dist": "2.16.105",
    "webpack": "4.30.0",
    "tslib": "^2.0.1"

解决方法 #

方法1：降级pdfjs-dist适配webpack 4 #

webpack 4对ES私有字段（代码中#开头的语法）支持不足，你当前用的pdfjs-dist版本包含这类语法，导致解析失败。建议降级到兼容webpack 4的版本：

npm install pdfjs-dist@2.10.377 @types/pdfjs-dist@2.1.7 --save

安装完成后重新执行ng serve即可。

方法2：用babel-loader处理pdfjs-dist文件 #

如果不想降级版本，可通过扩展Angular的webpack配置，添加babel转译来处理新语法：

1. 安装所需依赖：

   npm install @angular-builders/custom-webpack babel-loader @babel/core @babel/preset-env --save-dev
   

2. 在项目根目录创建custom-webpack.config.js：

   module.exports = {
     module: {
       rules: [
         {
           test: /pdf\.js$/,
           include: /node_modules\/pdfjs-dist\/build/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: [['@babel/preset-env', { targets: "defaults" }]]
             }
           }
         }
       ]
     }
   };
   

3. 修改angular.json中的构建配置，替换builder并指定自定义webpack文件：

   "architect": {
     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./custom-webpack.config.js"
         },
         // 保留原有其他配置
       }
     },
     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server",
       // 保留原有其他配置
     }
   }
   

4. 重新运行ng serve。

方法3：使用pdfjs-dist的legacy版本 #

pdfjs-dist官方提供了兼容旧版打包工具的legacy构建文件，直接替换原有引入路径即可：

import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf';
import 'pdfjs-dist/legacy/web/pdf_viewer';

无需修改webpack配置，直接使用该版本就能避开语法解析问题。

内容的提问来源于stack exchange，提问作者user22786532