React-pdf: Compatibility with Webpack 4 / Create React App 2

For users of Create React App 2, or anyone that is using webpack 4 in general. This issue appears as the following message when using the webpack entry point:

.../node_modules/pdfjs-dist/build/pdf.worker.js
Module build failed: TypeError: Cannot read property 'thisCompilation' of undefined

@wojtekmaj I requested that a new release that is webpack 4 compatible be pushed out last week (https://github.com/mozilla/pdf.js/issues/9440#issuecomment-394847900). It appears that they did cut a release that may work (2.0.550). How can we test this version works on our end?

Hmmm, that's fairly easy. You can run project in /sample directory after upgrading Webpack to 4.x and doing minor changes to Webpack config (e.g. adding mode).

Another issue to monitor before it gets resolved: mozilla/pdf.js#9733

Thanks! I'm going to take some time today to look into updating to the newer version as we discussed a few weeks ago.

Upgrading should be as easy as changing a dependency for a new PDF.js version which uses new worker-loader and consequently supports Webpack 4, but drops support for Webpack 2. We're just waiting for a official pdf.js 2.0 release.

@wojtekmaj I've just followed your instruction to test webpack4. Forked pdfjs-dist and react-pdf and it seems working well! (thanks for your work!!)
I'd like to clarify that it doesn't work if I specify import { Document } from 'react-pdf/dist/entry.webpack'; instead of import { Document } from 'react-pdf';. does this mean we don't need to import from react-pdf/dist/entry.webpack from version 4?

No, that does not mean we shouldn't use bundler-specific entry points. They are there to kickstart you real fast. Although if you have pdf.worker.js provided on your own in correct location, you can safely use the default entry.

I'm glad that Webpack 4 worked for you - I'll be upgrading it as soon as we get the confirmation from Mozilla that PDF.js 2.0 is ready to go.

Any project using react-pdf can actually try the above recommended next version of pdf.js using yarn selective version resolutions in package.json:

  "resolutions": {
    "react-pdf/pdfjs-dist": "2.0.550"
  },

Also, if you get Uncaught ReferenceError: window is not defined. from pdf.js worker when running local webpack dev server with hot module reloading, then add globalObject: 'this' in the output section of webpack config, see https://github.com/webpack/webpack/issues/6642#issuecomment-371087342.

Unfortunately, we encountered another error after upgrade to webpack 4, which wasn't solved by experimental switching from pdfjs-dist 2.0.489 to 2.0.550, see #248.

I ran into issues where the worker.js bundle was not being loaded.

I fixed it by adding a publicPath entry in my output object in webpack config, as well as globalObject: 'this' as explained above. See https://webpack.js.org/guides/public-path/

Any progress in this issue?

We got this error with Webpack 4 and react-pdf 3.X

With version 4.X is not even loading our app. :(

Sorry, I'm completely stuck because of dependencies. See mozilla/pdf.js#9580 for details. Any workarounds or contributions to mozilla's code are welcome.

How is webpack being listed as in peerDependencies blocking progress on this?

Webpack not so much, but worker-loader is the key. In version 1.x, it's not compatible with Webpack 4, so you can't use Webpack-specific entry.

In PDF.js 2.x, which is used internally by React-PDF 4.x, this dependency was upgraded to 2.0, which should solve some issues with Webpack 4. You can test React-PDF 4.x now and feedback is very welcome.

So in theory, react-pdf@^4.0.0 is react-scripts@^2.0.0 compatible?

@SavePointSam Please read #280, other than that we're good I think.

FYI all, we got info from Mozilla and React-PDF 4.0.0 final release should be out next week.

Is that final release out yet?

No it's not. We're blocked by mozilla/pdf.js#10205. I'm considering releasing 4.0.0 final with pdfjs-dist 2.0.550 at this point.

react-pdf: v4.0.0-beta.6
I've set globalObject: 'this', in webpack config and got this error:

Any update on this? I'm getting the same error (Uncaught ReferenceError: window is not defined) in a react-electron-boilerplate project.

@wojtekmaj I've been trying to diagnose this for some time now, and I'm not sure how to proceed.

I'm considering releasing 4.0.0 final with pdfjs-dist 2.0.550 at this point.

Is this still going to happen?

What's the plan for now?

@varunpatro 4.0.0 final was released a long time ago now. It should work fine with Webpack 4. If it isn't, it should be considered a bug.

@wojtekmaj Does following warning go away with the most recent version?

./node_modules/pdfjs-dist/build/pdf.js Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

@brydenfogelman No, this is tracked under #280 and is not closed.

Looks like it resolved in this solution

try this:

import { PDFJS } from 'pdfjs-dist/build/pdf.combined';
import 'pdfjs-dist/web/compatibility';

_maybe you need to use lower version "pdfjs-dist": "1.8.357"_