how to handle "document is not defined" in ng17 ssr

[ohabash]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

I am using QuillJs ... After installing it SSR stops working. I tried JSDOM and other advices online. Looking for the most modern advice. Please see my reproduction of the issue.

Please provide a link to a minimal reproduction of the bug

https://github.com/ohabash/ng-ssr-quill

https://stackoverflow.com/questions/78295372/angular-17-ssr-document-is-not-defined-when-using-quilljs

Please provide the exception or error you saw

> [vite] Error when evaluating SSR module /main.server.mjs:
|- ReferenceError: document is not defined

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.3
Node: 20.9.0
Package Manager: npm 10.1.0
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.3
@angular-devkit/build-angular   17.3.3
@angular-devkit/core            17.3.3
@angular-devkit/schematics      17.3.3
@schematics/angular             17.3.3
rxjs                            7.8.1
typescript                      5.4.4
zone.js                         0.14.4

Anything else?

No response

[JeanMeche]

Hi,
The common recommandation is to wrap client only library invocation inside afterNextRender() or with if(isPlatformBrowser()) which will run the code only on the client and not on the server.

[ohabash]

Please dont give up on this topic. Look at my repo. the error is caused by simply having the imort in a component. so in the repo how would you apply that advice of afterNextRender & if(isPlatformBrowser())...

As this forum might not be the correct place to find help. where do you recommend i find help?

@JeanMeche

[JeanMeche]

This means you'll likely need to import your library dynamicaly. (via a dynamic import).

Stackoverflow or the Angular Community discord are good places for getting help from the community.

[ohabash]

Is something like this what you had in mind?

please. I need to know how to do this and other sources are not helping.

[JeanMeche]

You're using a default export here, you need to access that constructor.

const module = await import('quill');
this.editor = new module.Quill(...)

[ohabash]

That seems to work. I updated the repo https://github.com/ohabash/ng-ssr-quill

[bxbdev]

That seems to work. I updated the repo https://github.com/ohabash/ng-ssr-quill

Thanks, it's worked!!!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}