SSR Error with Angular Universal: "ReferenceError: document is not defined"
ODAncona opened this issue · 9 comments
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-viewerlibrary. - Try running the app in SSR mode using the
npm run dev:ssrcommand. - 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.
I have the same Problem
Same problem too ; Did you solved the issue? Thx
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?
Same error. Any update on this?
Same problem. Did anyone find a way to fix?
const document = new Document() on constructor and solved for me
Has anyone managed to solve this?
Any news ?
Any good news?