Browser compatibility without Node shims

[sannies]

I'm trying to make pdfjs work in Angular 6 (Angular 4 worked without any issue)

The code in https://github.com/sannies/pdfjs-angular6-issue compiles just fine but during runtime I get this error

document.js:17 Uncaught TypeError: Class extends value undefined is not a constructor or null at Object../node_modules/pdfjs/lib/document.js (document.js:17) at __webpack_require__ (bootstrap:76) at Object../node_modules/pdfjs/lib/index.js (index.js:5) at __webpack_require__ (bootstrap:76) at Object../src/app/pdf-generator.service.ts (app.module.ts:17) at __webpack_require__ (bootstrap:76) at Object../src/app/app.component.ts (main.js:94) at __webpack_require__ (bootstrap:76) at Object../src/app/app.module.ts (app.component.ts:10) at __webpack_require__ (bootstrap:76)

would you be able to point me in the right direction?

[rkusa]

Hi, thanks for taking the effort of creating an example repo demonstrating the issue. Though, I'll need some days to find time to look into it in more detail.

The error points at the following line: class Document extends Readable and from the error message, it sounds like Readable is undefined, which is strange.

What Node version are you using? What do you get when executing require('stream').Readable in a node REPL?

% node
> require('stream').Readable
{ [Function: Readable]

[sannies]

This is what I get but I don't believe it gets us anywhere cause my execution environment is the browser and not NodeJS (though node is used to transpile typescript -> javascript). But I'm a Java/Python backend guy doing Angular - I'm totally lacking background knowledge on the inner workings of these Javascript environment (I don't even know what REPL means).

sannies$ node 
> require('stream').Readable
{ [Function: Readable]
  ReadableState: [Function: ReadableState],
  super_: 
   { [Function: Stream]
     super_: 
      { [Function: EventEmitter]
        EventEmitter: [Circular],
        usingDomains: true,
        defaultMaxListeners: [Getter/Setter],
        init: [Function],
        listenerCount: [Function] },
     Readable: [Circular],
     Writable: { [Function: Writable] WritableState: [Function: WritableState], super_: [Circular] },
     Duplex: { [Function: Duplex] super_: [Function] },
     Transform: { [Function: Transform] super_: [Function] },
     PassThrough: { [Function: PassThrough] super_: [Function] },
     Stream: [Circular],
     _isUint8Array: [Function: isUint8Array],
     _uint8ArrayToBuffer: [Function: _uint8ArrayToBuffer] },
  _fromList: [Function: fromList] }
> 

[sannies]

What seems to be related or a possible root cause is the fact that Angular 6 removed the NodeJS shims.

[rkusa]

Yes, this might be the cause. The browser support currently has the assumption that during transpiling/bundling of pdfjs, shims for the Node's stream interface are automatically inserted.

Maybe, instead of relying on Node shims, require('stream').Readable could be replaced by https://github.com/nodejs/readable-stream This needs some testing, though

[rkusa]

The issue might be solves with current master (not published to NPM, yet). Do you mind giving it a try?

[sannies]

The problem is gone, but I got new problems: (1) index.js:3 Uncaught ReferenceError: process is not defined --> tried to mitigate by using this workaround: https://stackoverflow.com/questions/50313745/angular-6-process-is-not-defined-when-trying-to-serve-application then (2) index.js:43 Uncaught ReferenceError: global is not defined --> tried to mitigate by using wa proposed here: https://github.com/angular/angular-cli/issues/9920 and then ended with: util.js:103 Uncaught ReferenceError: Buffer is not defined

I don't believe going down this route (workarounds) leads to success I fear pdfjs needs dedicated support for the browser. This posting here seems to show a nice way: https://nolanlawson.com/2017/01/09/how-to-write-a-javascript-package-for-both-node-and-the-browser/

For the moment I leave my PDF generation on in the node environment even though I'd like to move it to the browser. (Sorry - can't spend too much time on it until my customer requests to move the PDF generation to the client.)

[rkusa]

Yeah, those are all parts that traditionally worked fine, since shims are automatically added during transpilation. I still have no issues running pdfjs in the browser, but I respect the use-case of disabling Node shims and are open to support it. I also agree that going with workarounds shouldn't be the long-term solution. Though, since it still works for my own usage, it might take some time until I find time to have a look of how to replace this stuff. Still, thanks for elaborating and reporting the issues that occurred.

[mrbrianevans]

I also had this problem. Tried using the library in my Vite project and getting "global is not defined" error.