ssr - document is not defined

Question

ssr - document is not defined

CharlieGreenman opened this issue 10 months ago · comments

Charlie Greenman commented 10 months ago

I'm submitting a

Feature/improvment (a behavior that used to work and stopped working in a new release)

Current behavior

Not sure if worth addressing but when using edit-on-place with Angular 17 I am getting the following error:

ERROR ReferenceError: document is not defined
at editMode (./node_modules/@ngneat/edit-in-place/fesm2020/ngneat-edit-in-place.mjs:83:55)
at editMode (./node_modules/@ngneat/edit-in-place/fesm2020/ngneat-edit-in-place.mjs:90:43)
at value (./node_modules/rxjs/dist/esm/internal/operators/switchMap.js:14:23)
at _next (./node_modules/rxjs/dist/esm/internal/operators/OperatorSubscriber.js:13:21)
at next (./node_modules/rxjs/dist/esm/internal/Subscriber.js:31:18)
at _subscribe (./node_modules/rxjs/dist/esm/internal/BehaviorSubject.js:12:44)
at _trySubscribe (./node_modules/rxjs/dist/esm/internal/Observable.js:37:25)
at _trySubscribe (./node_modules/rxjs/dist/esm/internal/Subject.js:74:22)
at cb (./node_modules/rxjs/dist/esm/internal/Observable.js:31:30)
at errorContext (./node_modules/rxjs/dist/esm/internal/util/errorContext.js:19:9)

Expected behavior

Should work out of the box with SSR

Minimal reproduction of the problem with instructions

NA will try and get around to given time

What is the motivation / use case for changing the behavior?

NA. For some reason started coming across this issue with Angular. I suspect because domino which mocks window and document does not work with Angular 17.

Environment

1. Mac OS 
2. Angular 17

Gerome Grignon commented 10 months ago

resolved.

Gerome Grignon · Answer 1 · Sat Nov 25 2023 03:59:08 GMT+0800 (China Standard Time)

I have limited experience with Angular and SSR.

Based on the documentation, the fix would be to move the ngOnInit block of the EditableComponent to afterRendernot to rely on the document API on server side: https://angular.dev/guide/ssr#authoring-server-compatible-components.

Charlie Greenman · Answer 2 · Mon Nov 27 2023 03:04:27 GMT+0800 (China Standard Time)

ng neat is registered in the component html itself, via a module. To fix this as ngneat used in the HTML itself, would be to make this fix in the library itself

Gerome Grignon · Answer 3 · Mon Nov 27 2023 18:07:33 GMT+0800 (China Standard Time)

Indeed, a fix is in progress to support SSR by using afterNextRender.
It means the minimum Angular version required for this new version will be Angular v16.

Gerome Grignon · Answer 4 · Tue Nov 28 2023 00:13:59 GMT+0800 (China Standard Time)

It'll requires more time than expected: update to Angular 17 is done (from previous Angular 13 version).
Using afterNextRenderrequires to move away from using Observable towards Signals API (events are not emitted anymore).

Charlie Greenman · Answer 5 · Tue Nov 28 2023 00:17:47 GMT+0800 (China Standard Time)

By all means, you have my thanks

Gerome Grignon · Answer 6 · Tue Nov 28 2023 01:37:33 GMT+0800 (China Standard Time)

Hello @CharlieGreenman, can you give a try to 1.9.0 version?

Charlie Greenman · Answer 7 · Tue Nov 28 2023 06:48:12 GMT+0800 (China Standard Time)

It is causing my ngModules to break

Charlie Greenman · Answer 8 · Tue Nov 28 2023 06:51:16 GMT+0800 (China Standard Time)

Module was removed and changed to standalone component: https://github.com/ngneat/edit-in-place/pull/94/files#diff-3d83580a41cb8bd79a4248b846ad31e50f2c369ad86cabc5a996cb9e02a1dffa

I will look into importing directives individually but will require refactor of codebase

Gerome Grignon · Answer 9 · Tue Nov 28 2023 06:51:22 GMT+0800 (China Standard Time)

I need to update the documentation: the new APi is using the Standalone API.
There is no EditableModule anymore.

Charlie Greenman · Answer 10 · Tue Nov 28 2023 06:51:45 GMT+0800 (China Standard Time)

sure, i am trying that now

Charlie Greenman · Answer 11 · Tue Nov 28 2023 07:57:40 GMT+0800 (China Standard Time)

Successfully migrated over to the next syntax. Will keep you posted if i still experience document issue

Charlie Greenman · Answer 12 · Tue Nov 28 2023 07:59:52 GMT+0800 (China Standard Time)

No longer getting the error. I use EditableCOmponent and directives. Can mark this as complete until further notice. Thank you and good work

Charlie Greenman · Answer 13 · Tue Nov 28 2023 13:04:30 GMT+0800 (China Standard Time)

I am now getting

ERROR TypeError: Cannot read properties of undefined (reading 'tpl')
at EditableComponent_Template (./node_modules/@ngneat/edit-in-place/fesm2022/ngneat-edit-in-place.mjs:22:103)
at executeTemplate (./node_modules/@angular/core/fesm2022/core.mjs:12159:9)
at refreshView (./node_modules/@angular/core/fesm2022/core.mjs:13392:13)
at detectChangesInView (./node_modules/@angular/core/fesm2022/core.mjs:13617:9)
at detectChangesInViewIfAttached (./node_modules/@angular/core/fesm2022/core.mjs:13580:5)
at detectChangesInComponent

Gerome Grignon · Answer 14 · Tue Nov 28 2023 13:08:35 GMT+0800 (China Standard Time)

Can you share related html code?
Given the error I'd say either the editMode or viewMode directive is not applied with an editable component.

Charlie Greenman · Answer 15 · Tue Nov 28 2023 13:13:49 GMT+0800 (China Standard Time)

<editable>
    <ng-template viewMode><span class="displayText" #existingTextSpan>{{defaultValue}}</span></ng-template>
    <ng-template editMode>
        <input matInput [style.width]="defaultValue.length * 14 + 'px'" editableFocusable editableOnEnter [placeholder]="defaultValue" (keyup.enter)="saveEdit($event)"/>
    </ng-template>
</editable>

Gerome Grignon · Answer 16 · Tue Nov 28 2023 13:28:34 GMT+0800 (China Standard Time)

Using your template, i can only reproduce it if the directives are not imported: https://stackblitz.com/edit/angular-ugpjwc
Can you check your imports?

Charlie Greenman · Answer 17 · Tue Nov 28 2023 13:35:15 GMT+0800 (China Standard Time)

that is it, thank you