SSR Error with Angular Universal: "ReferenceError: document is not defined"

ODAncona commented 9 months ago

Bug Report or Feature Request (mark with an `x`)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [X] Bug report -> please search issues before submitting
- [ ] Feature request
- [ ] Documentation issue or request

Expected behavior:

The library should be compatible with SSR and shouldn't throw an error related to the usage of document or any other browser-specific API.

Current behavior:

When running the application with SSR npm run dev:ssr, an error related to document is not defined appears in the server console.

Steps to reproduce:

Set up an Angular project with SSR.
Install and integrate the ng2-pdf-viewer library.
Try running the app in SSR mode using the npm run dev:ssr command.
Observe the error related to document is not defined.

Or clone the repo I made for this error

Minimal Reproduction of SSR error

Related code:

I didn't forget to add the canvas dependencies in angular.json as mentionned in the issue #908

        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/ng2-pdf-viewer-test/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "inlineStyleLanguage": "scss",
            "externalDependencies": ["canvas"]
          },

Error log:

Compiled successfully.
./node_modules/pdfjs-dist/web/pdf_viewer.js:1559
const docStyle = document.documentElement.style;
                 ^

ReferenceError: document is not defined
    at Array.Object.defineProperty.value (./node_modules/pdfjs-dist/web/pdf_viewer.js:1559:18)
    at __w_pdfjs_require__ (./node_modules/pdfjs-dist/web/pdf_viewer.js:9072:41)
    at Array.Object.defineProperty.value (./node_modules/pdfjs-dist/web/pdf_viewer.js:552:17)
    at __w_pdfjs_require__ (./node_modules/pdfjs-dist/web/pdf_viewer.js:9072:41)
    at Array.Object.defineProperty.value (./node_modules/pdfjs-dist/web/pdf_viewer.js:53:25)
    at __w_pdfjs_require__ (./node_modules/pdfjs-dist/web/pdf_viewer.js:9072:41)
    at <anonymous> (./node_modules/pdfjs-dist/web/pdf_viewer.js:9245:24)
    at <anonymous> (./node_modules/pdfjs-dist/web/pdf_viewer.js:9279:2)
    at factory (./node_modules/pdfjs-dist/web/pdf_viewer.js:9282:11)
    at webpackUniversalModuleDefinition (./node_modules/pdfjs-dist/web/pdf_viewer.js:25:20)

Node.js v18.17.1
A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:40569

Environment:

Angular CLI: 16.1.8
Node: 18.17.1
Package Manager: npm 9.8.1
OS: linux x64

Angular: 16.2.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.2
@angular-devkit/build-angular   16.2.2
@angular-devkit/core            16.2.2
@angular-devkit/schematics      16.1.8
@angular/cli                    16.1.8
@nguniversal/builders           16.2.0
@nguniversal/express-engine     16.2.0
@schematics/angular             16.1.8
rxjs                            7.8.1
typescript                      5.1.6

Additional information:

The error seems to originate from a dependency (pdfjs-dist). It's possible that this dependency isn't fully compatible with SSR. If there is a solution or workaround specifically for this library in the context of SSR, it would be appreciated.

JalilGafar commented 8 months ago

I have the same Problem

PierreLucB commented 8 months ago

Same problem too ; Did you solved the issue? Thx

rodrigooler commented 7 months ago

I'm having the same problem, if I reinforce to use Inject(DOCUMENT) wouldn't it solve both for document and for window so it would be possible to reuse it in ssr?