"regeneratorRuntime is not defined" for pdf.worker.js

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

Description

When I try to load a page that renders a PDF, I see this error in my console, and the PDF does not render.

Steps to reproduce

Steps to reproduce the behavior:

Even this most basic of examples causes the issue.

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

const PDFPage = () => {
  return (
    <Document file="https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf">
      <Page pageNumber={1} />
    </Document>
  );
};

export default PDFPage;

Expected behavior

The document renders on the page.

Additional information

I originally had this error from react-pdf itself, which was resolved by explicitly importing core-js/stable and regenerator-runtime/runtime in the app root file. Now it’s coming from the worker, but I don’t see how to resolve it.

I’ve already gone down the large babel / plugin-transform-runtime / polyfill / etc. rabbit hole with no luck.

Environment

• Browser (if applicable) [e.g. Chrome 57, Firefox 59]: both Firefox 84.0.2 and Chrome 87.0.4280.88 have this issue.
• React-PDF version [e.g. 3.0.4]: 5.1.0
• React version [e.g. 16.3.0]: 17.0.1
• Webpack version (if applicable) [e.g. 4.16.2]: 4.44.2

[xxx]

I think I can close this. I’m pretty sure this is just a weird special case.

I was able to get rid of the inline loader via some webpacker config, left here for anyone that shows up here in the future:

environment.loaders.append('pdfjs-worker', {
  test: /pdf\.worker(\.min)?\.js$/,
  loader: 'file-loader'
});

[xxx]

Sure, I’ve put both files in gists here Note that this is a Rails app, so webpacker is sitting in front of webpack itself, and is configured via the yml file in the fist.

In other news, I was able to get the pdf to load with the following (based on this comment), but it doesn’t work when importing from the entry directly:

import React, { useEffect } from 'react';

// Note that this method does *not* work when importing from react-pdf/dist/esm/entry.webpack
import { Document, Page, pdfjs } from 'react-pdf';
// Importing directly from pdfjs-dist instead of through file-loader does *not* work.
import PDFJSWorker from '!!file-loader!pdfjs-dist/build/pdf.worker.min.js';

const PDFPage = () => {
  useEffect(() => {
    pdfjs.GlobalWorkerOptions.workerSrc = PDFJSWorker;
  });

  return (
    <Document file="https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf">
      <Page pageNumber={1} />
    </Document>
  );
};

export default PDFPage;

I kind of wonder if this is another special case like CRA.