Module parse failed: Unexpected token in Storybook when working with pdfjs-dist

Viewed 1276

I am working with a package that uses the pdfjs-dist package, and when trying to load the component that uses it in my Storybook, I get the following error

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;
|   }
|

My guess, it is about handling XFA files, which are PDF files.
This is my main.js file in .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

The component works swimmingly in my development server, the issue is only in Storybook. Because of that issue, it is unable to even start the storybook server. If I remove the component that uses the package, storybook loads.

The error tells me to use proper webpack configs, but I just cannot figure that one out. This is what I tried, and it didn't work. (in webpackFInal: async () => { ... )

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

and

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

Found them here: https://github.com/mozilla/pdf.js/issues/14172

0 Answers
Related