React-pdf: BlueprintJS and pdf.js break

[nschwan94]

Uncaught TypeError: Cannot read property 'PDFJS' of undefined
    at Object.defineProperty.value (pdf.js:13270)
    at __w_pdfjs_require__ (pdf.js:45)
    at Object._typeof (pdf.js:7416)
    at __w_pdfjs_require__ (pdf.js:45)
    at Object.defineProperty.value (pdf.js:88)
    at pdf.js:91
    at webpackUniversalModuleDefinition (pdf.js:18)
    at Object../app/node_modules/pdfjs-dist/build/pdf.js (pdf.js:25)
    at __webpack_require__ (bootstrap 53283a0…:686)
    at fn (bootstrap 53283a0…:105)

This error started occurring when we attempted to switch app to React 16, but coming from v15.4 and 1.6 of react-pdf. We boosted react-pdf to latest and even tested on React 15.5 first, but got this error still when importing Document and Page components.

[wojtekmaj]

Hmm. The problem is not inside React-PDF itself but in Mozilla's PDF.js so I will need to redirect you to their GitHub project for support. I'd love to help more, but I have no clue on what their code is exactly trying to achieve there.

I can only see that the line failing is:

if (!_global_scope2.default.PDFJS) {
  _global_scope2.default.PDFJS = {};
}

please keep me updated!

[nschwan94]

I think this is an issue with some other dependency I have because I can't reproduce just in a project with Electron and React 16. More to come.

[nschwan94]

So, after slowly and carefully removing individual dependencies from my component tree, I've narrowed the cause down to @blueprintjs/core. Whenever I have that dependency imported in my component tree, the above error rears its ugly head. I recently upgraded to the latest @blueprintjs/core version, so I'll try rolling it back a bit to see if I can identify version that is causing this.

Edit: my version of @blueprintjs/core encountering this error was 1.31.0

[nschwan94]

added an issue to the blueprint repo https://github.com/palantir/blueprint/issues/1732

[nschwan94]

https://github.com/mozilla/pdf.js/issues/9043

[nschwan94]

so this only happens when I use yarn 1.1, it doesn't happen when I use npm 5.0.

[wojtekmaj]

@nschwan94 FYI Yarn 1.3.x is already out, maybe that would help?

[nschwan94]

thanks for the tip. I upgraded. Now, strangely, I'm getting this message from Webpack build:

ERROR in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./~/style-loader!./~/css-loader?{"modules":true,"sourceMap":true,"importLoaders":1,"localIdentName":"[name]__[local]__[hash:base64:5]"}!./app/~/react-pdf/build/annotation_layer_builder.css
Module build failed: 
/* Copyright 2014 Mozilla Foundation
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/nathanschwan/Desktop/FleetbuilderStarter/fleetbuilder/app/node_modules/react-pdf/build/annotation_layer_builder.css (line 1, column 1)
 @ ./app/~/react-pdf/build/annotation_layer_builder.css 4:14-362 13:2-17:4 14:20-368
 @ ./app/~/react-pdf/build/PageAnnotations.js
 @ ./app/~/react-pdf/build/Page.js
 @ ./app/~/react-pdf/build/entry.webpack.js
 @ ./app/components/Base/Documentation.js
 @ ./app/components/Base/DocumentationManagement.js
 @ ./app/components/App.js
 @ ./app/index.js
 @ multi react-hot-loader/patch webpack-dev-server/client?http://localhost:3000/ webpack/hot/only-dev-server ./app/index.js

[wojtekmaj]

Check if your Webpack config can handle .css files.

[nschwan94]

thanks for the pro tip. I'm sure a 'git blame' would reveal the mastermind who managed to edit their webpack config file in the middle of upgrading dependencies. whatever kindness you've shown me here, I will pay forward. issue resolved.