es2018 syntax in build.js for v2.7.x breaks webpack builds

[kevinbeal]

Configuration:

• PDF.js version: 2.7.x (next)

Steps to reproduce the problem:

1. import "pdfjs-dist"
2. observe that nullish coalescing operators (and other new syntax) prevent webpack from building the project.

What is the expected behavior? (add screenshot)
That there be a build file that is supported by the default JS loader in webpack.

What went wrong? (add screenshot)
The new syntax is not parse-able by Webpack's default JS loader and so throws an error suggesting a different loader.

The workaround for this is explained here, or you can include all of the /node_modules folder in your babel or Typescript (or whatever) loader.

Neither of these workarounds work in the case of most Angular builds, however. No such control over loaders is available without "ejecting" the build configuration, meaning essentially that you now have to manage the webpack configuration yourself and manually apply complicated update steps whenever Angular itself bumps versions.

Custom Builders may hold a solution but I have yet to figure it out. The undefined regeneratorRuntime issue is stopping me despite recommendations here. And nothing is defined when I import from "pdfjs-dist" anymore.

[Snuffleupagus]

import "pdfjs-dist"

If you need to support older environments, you may want to look into https://github.com/mozilla/pdfjs-dist/tree/master/es5; please also note the pdfjs-dist README: https://github.com/mozilla/pdfjs-dist#pdfjs

observe that nullish coalescing operators (and other new syntax) prevent webpack from building the project.

What version of Webpack is that?
When we updated our build scripts to use Webpack 5, that removed the need for handling e.g. nullish coalescing specially.

[kevinbeal]

Thanks for the prompt reply!

If you need to support older environments, you may want to look into mozilla/pdfjs-dist@master/es5; please also note the pdfjs-dist README: mozilla/pdfjs-dist#pdfjs

Thank you. It does appear to resolve my issue completely!

In my case, I do need to support older browsers, so this works better than what I was attempting before anyway. And I don't need the hack described here either :) I only needed to change the import path.

What version of Webpack is that?
When we updated our build scripts to use Webpack 5, that removed the need for handling e.g. nullish coalescing specially.

It's Webpack 4.4, the latest that Angular with npm as the package manager will support (until v12, I think). I tried using yarn instead to use webpack 5, but I must have missed some step because everything broke.

Regardless, my issue is resolved. The README had the necessary information. I just didn't read it before.

[tanzyy96]

@Snuffleupagus
Hi I'm currently running into issues with running Webpack 4.4.

If you need to support older environments, you may want to look into https://github.com/mozilla/pdfjs-dist/tree/master/es5; please also note the pdfjs-dist README: https://github.com/mozilla/pdfjs-dist#pdfjs

The link is dead already. How can I run on the older webpack version?

[Snuffleupagus]

The link is dead already.

https://github.com/mozilla/pdfjs-dist#pdfjs still work just fine, and that README explicitly tells you what to do:

For usage with older browsers or environments, without support for modern features such as e.g. async/await, ReadableStream, optional chaining, and nullish coalescing; please see the legacy folder.

[evanjmg]

This should not be closed

[evanjmg]

solution for those on old build systems here:
I have Angular 11, so I had to patch-package like so:

diff --git a/node_modules/@angular-devkit/build-angular/src/babel/presets/application.js b/node_modules/@angular-devkit/build-angular/src/babel/presets/application.js
index 54b5b63..a348ab2 100644
--- a/node_modules/@angular-devkit/build-angular/src/babel/presets/application.js
+++ b/node_modules/@angular-devkit/build-angular/src/babel/presets/application.js
@@ -91,6 +91,21 @@ function default_1(api, options) {
             },
         }));
     }
+    plugins.push(...[
+            require("@babel/plugin-proposal-async-generator-functions").default,
+            require("@babel/plugin-proposal-class-properties").default,
+            require("@babel/plugin-proposal-export-namespace-from").default,
+            require("@babel/plugin-proposal-json-strings").default,
+            require("@babel/plugin-proposal-logical-assignment-operators").default,
+            require("@babel/plugin-proposal-nullish-coalescing-operator").default,
+            require("@babel/plugin-proposal-numeric-separator").default,
+            require("@babel/plugin-proposal-object-rest-spread").default,
+            require("@babel/plugin-proposal-optional-catch-binding").default,
+            require("@babel/plugin-proposal-optional-chaining").default,
+            require("@babel/plugin-proposal-private-methods").default,
+            require("@babel/plugin-proposal-unicode-property-regex").default
+        ]);
+
     if (options.forceES5) {
         presets.push([
             require('@babel/preset-env').default,
diff --git a/node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js b/node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
index 9a8cee0..87553f0 100644
--- a/node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
+++ b/node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
@@ -54,7 +54,7 @@ exports.default = babel_loader_1.custom(() => {
     return {
         async customOptions({ i18n, scriptTarget, ...rawOptions }, { source }) {
             // Must process file if plugins are added
-            let shouldProcess = Array.isArray(rawOptions.plugins) && rawOptions.plugins.length > 0;
+            let shouldProcess = true;
             const customOptions = {
                 forceAsyncTransformation: false,
                 forceES5: false,