Storybook中使用pdfjs-dist出现Module parse failed错误如何解决？

问题根因 #

该报错和XFA处理逻辑无关，本质是高版本pdfjs-dist使用了可选链(?.)等ES2020语法，而Storybook默认的Webpack配置不会对node_modules目录下的依赖做语法转译，因此解析到未转译的新语法时直接抛出解析失败错误。你之前尝试的worker配置不匹配问题根源，因此没有生效。

解决方案 #

方案1：修改Storybook Webpack配置转译pdfjs-dist #

1. 先安装必需的转译依赖：

npm install @babel/core @babel/preset-env babel-loader --save-dev
# 用yarn的话执行：yarn add @babel/core @babel/preset-env babel-loader -D
# 用pnpm的话执行：pnpm add @babel/core @babel/preset-env babel-loader -D

2. 修改.storybook/main.js中的webpackFinal配置，添加转译规则，完整配置如下：

const path = require('path');

module.exports = {
  stories: ['../components/**/*.stories.js', '../components/**/*.stories.mdx'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-dark-mode',
    'storybook-addon-next-router',
  ],
  webpackFinal: async (config, { isServer }) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../components'),
      store: path.resolve(__dirname, '../utils/stores'),
      dummy: path.resolve(__dirname, '../utils/dummy'),
    };
    // 新增：转译pdfjs-dist的ES2020+语法
    config.module.rules.push({
      test: /\.js$/,
      include: path.resolve(__dirname, '../node_modules/pdfjs-dist'),
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        },
      },
    });
    // 保留pdf.worker配置避免后续worker加载报错
    config.module.rules.push({
      test: /pdf\.worker\.js$/,
      type: 'asset/inline',
      generator: {
        dataUrl: (content) => content.toString(),
      },
    });
    if (!isServer) {
      config.node = {
        fs: 'empty',
      };
    }
    return config;
  },
};

3. 删除Storybook缓存后重启服务即可：

npx storybook --no-cache
# 或者手动删除node_modules/.cache目录后再启动Storybook

方案2：降级pdfjs-dist版本（无需改配置） #

如果不想修改构建配置，可直接将pdfjs-dist降级到还未使用ES2020新语法的版本：

npm install pdfjs-dist@2.11.338 --save

注意如果使用react-pdf-viewer，要确认当前版本和pdfjs-dist@2.11.338的兼容性，大部分v2.x版本的react-pdf-viewer都适配该版本pdfjs-dist。

内容的提问来源于stack exchange，提问作者Mähnenwolf