AnnotationLayer error and not sure why that is

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in Mozilla Firefox

React-PDF 5.2

Trying to display some Base64 PDF as a document, but getting this instead:

./node_modules/react-pdf/dist/esm/Page/AnnotationLayer.js 195:8-29
"export 'AnnotationLayer' (imported as 'pdfjs') was not found in 'pdfjs-dist'

followed by numerous other errors…

ERROR in ./node_modules/react-pdf/dist/esm/eventBus.js 2:19-27
15:26:11 webpack.1 | "export 'EventBus' was not found in 'pdfjs-dist/lib/web/ui_utils'

ERROR in ./node_modules/react-pdf/dist/esm/entry.webpack.js 14:2-27
15:26:11 webpack.1 | "export 'GlobalWorkerOptions' (imported as 'pdfjs') was not found in 'pdfjs-dist'

My setup code in my JSX file is:

import { Document } from 'react-pdf/dist/esm/entry.webpack';
import 'react-pdf/dist/Page/AnnotationLayer.css';

My Component looks like this:

<Document file={data:application/pdf;base64,${data}}>

What am I doing wrong to earn that message about AnnotationLayer and all the other problems?

My package.json shows yarn installed the package:

   "react-pdf": "^5.2.0",

[hornetDC]

@resistorsoftware you are not alone. I am also getting this error, but I don’t even import AnnotationLayer.css anywhere. Local development works but it breaks build.

Edit: it happens if I use “craco” to override CRA config.

// craco.config.js
const path = require('path');
const { getLoader, loaderByName } = require('@craco/craco');
const absolutePath = path.join(__dirname, '../uikit');

module.exports = {
  webpack: {
    alias: {},
    plugins: [],
    configure: (webpackConfig, { env, paths }) => {
      const { isFound, match } = getLoader(webpackConfig, loaderByName('babel-loader'));
      if (isFound) {
        const include = Array.isArray(match.loader.include)
          ? match.loader.include
          : [match.loader.include];
        match.loader.include = include.concat[absolutePath];
      }
      return webpackConfig;
    }
  }
};

[resistorsoftware]

So no one else ever gets this error. I am not amused. How do I run into these kinds of issues… yay!! I figured out how to render a PDF without this node package. In the meantime… was hoping anyone had some advice about what might be causing this package to die this way.

Just double-checked and even when I think it could be due to something else, nope… still puzzled. Won’t compile at all.

ERROR in ./node_modules/react-pdf/dist/esm/Page/AnnotationLayer.js 195:8-29 09:35:23 webpack.1 | "export ‘AnnotationLayer’ (imported as ‘pdfjs’) was not found in ‘pdfjs-dist’