升级pdfjs-dist后，依赖中的.mjs文件无法被Babel/Webpack正常处理

针对你升级pdfjs-dist后遇到的.mjs文件构建及运行错误，分步骤给出解决方案：

1. 修复"无法解析'process/browser'"模块错误 #

新版本pdfjs-dist依赖process/browser这个浏览器端兼容模块，Webpack默认不会自动解析它，需要手动配置：

• 先安装依赖包：

npm install process --save-dev

• 在业务应用的Webpack配置中添加resolve.fallback：

module.exports = {
  // 其他配置...
  resolve: {
    fallback: {
      "process/browser": require.resolve("process/browser")
    }
  }
};

2. 解决"无法读取undefined的'module'属性"类型错误 #

这个问题源于Babel转译.mjs文件时，破坏了ES模块与CommonJS的交互逻辑。调整方案：

• 修改组件库的Babel配置，排除对pdfjs-dist的转译，保留其原生.mjs格式：

{
  "exclude": /node_modules\/(pdfjs-dist)/,
  "presets": [
    "@babel/preset-react",
    ["@babel/preset-env", { "targets": "> 0.25%, not dead" }]
  ]
}

如果必须转译pdfjs-dist，要确保Babel不转译ES模块语法，交给Webpack处理：

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false, // 禁用ES模块转译
      "targets": "> 0.25%, not dead"
    }],
    "@babel/preset-react"
  ]
}

3. 修复Uncaught TypeError: (0 , _pdfjsDist.getDocument) is not a function错误 #

添加fullySpecified: false后出现这个问题，是因为转译后的CommonJS导入与pdfjs-dist的ES模块导出不兼容。解决方法：

方案一：调整导入语法 #

直接使用命名导入或整体导入，避免默认导入的兼容问题：

// 替换原默认导入
import pdfjs from 'pdfjs-dist';
// 改为整体命名空间导入
import * as pdfjs from 'pdfjs-dist';
// 或直接导入需要的方法
import { getDocument } from 'pdfjs-dist';

方案二：修正Webpack配置 #

让Webpack正确识别.mjs文件的模块类型，同时限制fullySpecified: false的作用范围：

module.exports = {
  // 其他配置...
  module: {
    rules: [
      // 处理.mjs文件，让Webpack自动识别模块类型
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      },
      // 仅对业务代码和组件库代码设置fullySpecified，不影响node_modules
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        options: {
          fullySpecified: false
        },
        exclude: /node_modules/
      }
    ]
  }
};

最终配置建议 #

• 组件库侧：保留pdfjs-dist的原生.mjs格式，不进行Babel转译；使用ES模块语法导入。
• 业务应用侧：配置Webpack的resolve.fallback处理process/browser；添加.mjs文件的类型解析规则；限制fullySpecified: false仅作用于自有代码。

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