🐞 - MutationObserver is not defined

[mohamed-rekiba]

Playground Link

No response

Description

• Issue encountered with @ng-web-apis/mutation-observer npm package in Angular SSR causing server closure due to an exception.
• Identified problem lies within the MutationObserverService class, which is using MutationObserver instead of SafeObserver.
• Investigated the source code and discovered it already implements SafeObserver.
• Suggest updating the npm package with the latest source code to resolve the issue.

ReferenceError: MutationObserver is not defined
at MutationObserverService.eval (/app/node_modules/.pnpm/@ng-web-apis+mutation-observer@3.1.0_@angular+core@17.3.5_rxjs@7.8.1_zone.js@0.14.4__@ng-web-_odteyczjjqgnrdfw53csgkqmv4/node_modules/@ng-web-apis/mutation-observer/fesm2015/ng-web-apis-mutation-observer.js:138:24)
at MutationObserverService._trySubscribe (/app/node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm/internal/Observable.js:37:25)
at eval (/app/node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm/internal/Observable.js:31:30)
at errorContext (/app/node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm/internal/util/errorContext.js:19:9)
at MutationObserverService.subscribe (/app/node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm/internal/Observable.js:22:9)
at doInnerSub (/app/node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm/internal/operators/mergeInternals.js:19:44)
at outerNext (/app/node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm/internal/operators/mergeInternals.js:14:57)
at OperatorSubscriber.OperatorSubscriber._next (/app/node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm/internal/operators/OperatorSubscriber.js:13:21)
at OperatorSubscriber.next (/app/node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm/internal/Subscriber.js:31:18)
at _Observable.eval (/app/node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm/internal/observable/innerFrom.js:51:24)

Angular version

17.3.5

Taiga UI version

3.75.0

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

[mohamed-rekiba]

Until this issue is resolved, I've crafted the following postinstall script as a temporary solution.

#!/bin/env sh

# Fix MutationObserver is not defined issue
NODE_MODULES="node_modules"
find "$NODE_MODULES" -type f \( -name "ng-web-apis-mutation*" -o -name "mutation-observer.service*" \) | while read -r file; do
    sed -i 's/new MutationObserver/new SafeObserver/g' $file 2>/dev/null
done

exit 0