Angular SSR build error: got document is not defined error when try to run SSR build

Question

ReferenceError: document is not defined
    .../dist/app/server/vendor.js:319308:13
    at Module.56601 (.../dist/app/server/vendor.js:319317

dose any one have solution for this error. This error appear when i do SSR build and try to run it.

This error first come from the main.js so i have manually inject document with angular in every pages but now it's coming from the vendor.js it's because some of my node modules use document. I want to solution for this.

here is more detail about the error i got from the cli

myapp@0.0.1 serve:ssr ...
> node dist/app/server/main.js

.../dist/app/server/vendor.js:319308   const e = document.createElement("span"),
            ^

ReferenceError: document is not defined
    at .../dist/app/server/vendor.js:319308:13
    at Module.56601 (.../dist/app/server/vendor.js:319317:3)
    at __webpack_require__ (.../dist/app/server/main.js:24408:42)
    at Module.80518 (.../dist/app/server/main.js:7629:62)
    at __webpack_require__ (.../dist/app/server/main.js:24408:42)
    at Module.70771 (.../dist/app/server/main.js:20312:94)
    at __webpack_require__ (.../dist/app/server/main.js:24408:42)
    at Module.59229 (.../dist/app/server/main.js:99:111)
    at __webpack_require__ (.../dist/app/server/main.js:24408:42)
    at Module.63370 (.../dist/app/server/main.js:819:72) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! myapp@0.0.1 serve:ssr: `node dist/app/server/main.js` npm ERR! Exit status 1 npm ERR!  npm ERR! Failed at the myapp@0.0.1 serve:ssr script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!     .../.npm/_logs/2023-07-27T05_02_50_176Z-debug.log abhay@Abhays-MacBook-Pro myapp % code . abhay@Abhays-MacBook-Pro myapp % npm run serve:ssr

> myapp@0.0.1 serve:ssr ...
> node dist/app/server/main.js

.../dist/app/server/vendor.js:319308   const e = document.createElement("span"),
            ^

ReferenceError: document is not defined
    at .../dist/app/server/vendor.js:319308:13
    at Module.56601 (.../dist/app/server/vendor.js:319317:3)
    at __webpack_require__ (.../dist/app/server/main.js:24408:42)
    at Module.80518 (.../dist/app/server/main.js:7629:62)
    at __webpack_require__ (.../dist/app/server/main.js:24408:42)
    at Module.70771 (.../dist/app/server/main.js:20312:94)
    at __webpack_require__ (.../dist/app/server/main.js:24408:42)
    at Module.59229 (.../dist/app/server/main.js:99:111)
    at __webpack_require__ (.../dist/app/server/main.js:24408:42)
    at Module.63370 (.../dist/app/server/main.js:819:72) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! myapp@0.0.1 serve:ssr: `node dist/app/server/main.js` npm ERR! Exit status 1 npm ERR!  npm ERR! Failed at the myapp@0.0.1 serve:ssr script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!     .../.npm/_logs/2023-07-27T05_03_11_215Z-debug.log

I got what is the actual issue. Issue with play.io lib which i used for add custom player skin in my app and it's failing to build SSR. here is link for plyr.io => https://plyr.io/ can anyone help me with it?

Possible duplicated: https://stackoverflow.com/questions/60636286/angular-9-ssr-build-serve-eror-error-referenceerror-document-is-not-defined Check it and tell us if it worked — JRichardsz, Jul 27 '23 at 05:30
i already mention this. That i have done it in my code but this error coming from the packages that use document. How can i resolve it? — abhay jani, Jul 27 '23 at 05:57

score 1 · Answer 1 · answered Jul 27 '23 at 07:44

You can't use a package that use document in angular universal.

You have two solutions:

1- Fork the package and change it (according to this: Angular 9 SSR Build Serve eror -- ERROR ReferenceError: document is not defined )

2- Use this package only when the server has finished responding.

isBrowser = false;
constructor(@Inject(PLATFORM_ID) private platformId) {
  this.isBrowser = isPlatformBrowser(this.platformId);
}

now you have to use that package like this:

if (this.isBrowser) {
  ... use package
}

Or you can use ngIf in the html code.

Angular SSR build error: got document is not defined error when try to run SSR build

1 Answers1