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

[xxx]

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

[wojtekmaj]

Is there any chance you could share your repo with me, preferably stripped down to just the config and your React-PDF usage? I'll try and look for the differences that could have lead to this error.

[xxx]

Unfortunately I'm unable to share the repo. I'm not even sure where to start attacking this.

I feel like this is a config problem on my end, but I have no idea whatsoever what it could be at this point. I've tried all solutions that I've been able to search up (typically these all revolve around babel-plugin-transform-runtime) with zero progress.

[wojtekmaj]

Then would it be possible to share your Babel and Webpack config?

[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.

[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'
});