Typescript pdfjs-dist: You may need an additional loader

Issue

I am trying to implement PDF viewer using @react-pdf-viewer/core@3.7.0 which depends on pdfjs-dist@2.15.349. I have installed both libraries but I am getting the following error:

./node_modules/pdfjs-dist/build/pdf.js 1259:21
    Module parse failed: Unexpected token (1259:21)
    File was processed with these loaders:
     * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | 
    |         class PixelsPerInch {
    >           static CSS = 96.0;
    |           static PDF = 72.0;
    |           static PDF_TO_CSS_UNITS = this.CSS / this.PDF;

I have tried deleting and reinstalling node_modules, but it did not worked at all. I do not have babel-loader. I am using "typescript": "^4.1.2", "react": "^17.0.2". How can I solve this problem?

Solution

From the error, I can tell you're using react-scripts (which is also where babel-loader is coming from, for what it's worth - you are using it, it's an implicit dependency).

I ran into this exact same error today. In my case, I was trying to add storybook to an existing react-scripts project. The project itself built fine, but the storybook build was blowing up with your error.

I eventually found that adding this webpack rule was sufficient to get my build working. It's a trimmed down version of what react-scripts does itself for external package code (which I found by ejecting and looking through the generated files).

          {
            test: /\/pdfjs-dist\//,
            loader: require.resolve('babel-loader'),
            options: {
              presets: [
                [
                  // Latest stable ECMAScript features
                  require('@babel/preset-env').default,
                ],
              ],
            },
          },

Hope this is of some use to you!

Answered By - Cookie Monster