Upgrading pdfjs-dist to v4

I am trying to upgrade pdfjs-dist to v4, I am running Meteor 2.13.3.

When I try to build the app, I get the following error message:

=> Build failed:                              
   
   While building for web.browser:
   node_modules/pdfjs-dist/build/pdf.mjs:
   ./node_modules/pdfjs-dist/build/pdf.mjs: Class private
   methods are not enabled. Please add `@babel/plugin-proposal-private-methods` to your
   configuration.
     237 |     this.#updates = null;
     238 |   }
   > 239 |   #setRectEdited(rect) {
         |   ^
     240 |     const {
     241 |       container: {
     242 |         style

I have tried adding the suggested plugin to babel’s config to no avail.

Any suggestions?

Here’s what phind.com has to say about it. Caveat: it’s an LLM and may be making stuff up. :slight_smile:

The error message you’re encountering indicates that your project is using Babel to transpile JavaScript code, and it’s trying to compile a file (pdf.mjs from the pdfjs-dist package) that uses class private methods. However, Babel is not configured to handle these private methods, hence the build failure.

To resolve this issue, you need to add the @babel/plugin-proposal-private-methods plugin to your Babel configuration. This plugin enables Babel to understand and correctly transpile class private methods. Here’s how you can do it:

  1. Install the Plugin: First, you need to install the plugin if you haven’t already. You can do this by running the following command in your terminal:
npm install --save-dev @babel/plugin-proposal-private-methods
  1. Update Babel Configuration: Next, you need to update your Babel configuration file (usually .babelrc, babel.config.js, or babel.config.json) to include the plugin. Here’s an example of how to do it in a .babelrc file:
{
  "plugins": ["@babel/plugin-proposal-private-methods"]
}

If you’re using a babel.config.js file, it would look something like this:

module.exports = {
  plugins: ['@babel/plugin-proposal-private-methods'],
};
  1. Restart Your Build Process: After updating your Babel configuration, restart your build process. This will allow Babel to pick up the new configuration and successfully transpile the code that uses class private methods.

By following these steps, you should be able to resolve the build failure caused by the lack of support for class private methods in your current Babel setup.

Thanks @vikr00001 for trying to help but this is exactly the “solution” I have tried and which did not work.

It seems likely to me that the majority of such issues currently arise due to Meteor 2 using an ancient version of Node, v14. Hopefully Meteor 3, which should be just around the corner, will fix that.

1 Like

Yes, I have several packages that have problems and I can’t update them due to being stuck at Node version 14 still.

Adding the following to package.json (together with the babel plugin configuration) does not help:

  "meteor": {
    "nodeModules": {
      "recompile": {
        "pdfjs-dist": true
      }
    }
  }

I’m encountering the same thing and have asked a question on the discord general channel. If I get a reply (or find a solution myself), I’ll repeat it here.

@superfail do you have this in your dev dependencies? @babel/preset-env · Babel

@paulishca Nope did not. Tried installing it: no change. Tried adding it to babel’s config: no change.

On top of that, @babel/preset-env is “configured by default” by Meteor (understand, Meteor provides some replacement for similar functionality, i.e. babel-preset-meteor), and any custom configuration is ignored anyway. See:

@zodern Is there a way to tweak the babel configuration used for recompilation of node modules? What am I doing wrong?

@denyhs Does someone at Meteor know how this can be made to work?

My first suspicion was with the Node version. As you can check in the package.json of this version, they specify that this version works with Node 18 or above.

image

However, I also tried to use this library with Meteor 3 and got the same error, even after installing the @babel/plugin-transform-private-methods and adding it to my .babelrc.

I’m not sure why this is happening. I could spend some time later trying to figure this out. But I’m not sure what else I could try.

3 Likes

@denyhs If that changes anything, you can try pdfjs-dist@v3.5.141, it is the first version to cause this problem.

Hello,
do you habe any update on this? I’m experiencing the same issue.

@nerlach I am curious about your need for PDF. Do you just need a viewer of PDF files in the browser?
This has been recently featured in JavaScript Weekly: https://pdfslick.dev/

No, we actually need functuality to render and search in pdf files in a more sophisticated way then what a simple pdf viewer can do for us. Afaik, pdfjs is the standard tool for that use case in browser contexts.

Hi @nerlach, sorry for the delayed answer here. I couldn’t find anything that could help with this issue. Did you try anything else?

@denyhs No worries. Unfortunetly, imho the pdfjs documentation itself is not very clear on how to use it with npm. And for now, i am unsure on what i could try next. We could probably build pdfjs by itself and update it manually. With npm, i currently see no other way than downgrading pdfjs-dist from 4.x to version 2.x, where the newer babel features are not used.

1 Like

Using meteor 3.0.2 and same problem.

You can try to get it async from one of the CDNs GitHub - mozilla/pdf.js: PDF Reader in JavaScript which is probably the best way given the size of this library.
Otherwise, pdfjs-dist is just a build generated from here: GitHub - mozilla/pdf.js: PDF Reader in JavaScript The repo has all the instruction for you to build whatever version you want, more or less modern.
Babel in Meteor and modern/legacy build has always been … quantum compilation for me. I just take what I am getting from that build and say “thank you” for another free deployment but otherwise I have never trusted the system to draw a clear line between legacy (what I want to be legacy) and modern(what I want to be modern).