时间戳

首页 > 解决方案 > 模块解析失败：使用 pdfjs-dist 时 Storybook 中出现意外的标记

pdf - 模块解析失败：使用 pdfjs-dist 时 Storybook 中出现意外的标记

问题描述

我正在使用一个使用该包的pdfjs-dist包，当尝试在我的 Storybook 中加载使用它的组件时，我收到以下错误

ERROR in ./node_modules/pdfjs-dist/build/pdf.js 2267:39
Module parse failed: Unexpected token (2267:39)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   async getXfa() {
>     return this._transport._htmlForXfa?.children[this._pageIndex] || null;
|   }
|

我猜，这是关于处理 XFA 文件，即 PDF 文件。
这是我的main.js文件.storybook

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'),
    };
    if (!isServer) {
      config.node = {
        fs: 'empty',
      };
    }
    return config;
  },
};

pdfjs-dist：https
://github.com/mozilla/pdf.js react-pdf-viewer：https ://github.com/react-pdf-viewer/react-pdf-viewer

该组件在我的开发服务器中运行良好，问题仅在 Storybook 中。由于这个问题，它甚至无法启动故事书服务器。如果我删除使用包的组件，故事书就会加载。

该错误告诉我使用正确的 webpack 配置，但我就是想不通。这是我尝试过的，但没有奏效。（在webpackFInal: async () => { ... ）

config.module.entry['pdf.worker'] = 'pdfjs-dist/build/pdf.worker.entry';

和

    config.module.rules.push({
      test: /pdf\.worker\.js$/,
      type: 'asset/inline',
      generator: {
        dataUrl: (content) => content.toString(),
      },
    });

在这里找到它们：https ://github.com/mozilla/pdf.js/issues/14172

标签： pdfwebpackloaderstorybook

解决方案

推荐阅读