Angularfire: The XMLHttpRequest compatibility library was not found.

[davidheis]

Hi, Im new to universal.
first I fixed an error 'cannot read property 'filter' of undefined' by going into angularfire2/firebase.app.module.js and changing the firebase import to 'import firebase from "firebase/app" which fixed that. Now I get this new error. I saw elsewhere on github issues that this was meant to be resolved with an update to "angularfire2". But still getting it.

This error happens when the command "node prerender" is run.

I deployed to firebase after running build:ssr. but viewing page source only shows app-root>

so im trying to get the npm build:prerender to work so my site is better for SEO.

i still dont quite understand the subtleties between ssr and prerender though, but i assume they both should show rendered html on clients browsers page source?

Version info

Angular:
"@angular/cli": "6.0.0",
Firebase:
"firebase": "^5.0.4",
AngularFire:
"angularfire2": "^5.0.0-rc.11",
Other (e.g. Ionic/Cordova, Node, browser, operating system):
ubuntu

How to reproduce these conditions

Failing test unit, Plunkr, or JSFiddle demonstrating the problem

Steps to set up and reproduce
https://github.com/davidheis/honey-ssr

Sample data and security rules

Debug output

* Errors in the JavaScript console *
ERROR { [Error: The XMLHttpRequest compatibility library was not found.]
code: 'auth/internal-error',
message: 'The XMLHttpRequest compatibility library was not found.' }
Error: The XMLHttpRequest compatibility library was not found.

* Output from firebase.database().enableLogging(true); *

* Screenshots *

Expected behavior

Actual behavior

I get Error: The XMLHttpRequest compatibility library was not found.

[BluebambooSRL]

Same problem.. @davidheis did you find the solution?

[davidheis]

it was all too hard in the end. too many moving pieces, too complicated. just went back to normal SPA and live with the fact my page partially renders on google bot. i dont have time to debug overly complicated apps let alone could you image if i had heaps of these to debug? no way.

[itsthesteve]

My understanding is there was a regression in rc.11, some workarounds in #1705.

[jamesdaniels]

You'll need to import a compatibility framework to your Functions && server.ts for SSR.

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

[inmogr]

You'll need to import a compatibility framework to your Functions && server.ts for SSR.

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

I'm having the same issue, could you please tell me why you said your Functions how it is related, and where can i find server.ts do you mean main.server.ts

[itsthesteve]

@inmogr With SSR you should have a server.ts (or whatever you want to name it) which has your express app. Import the required libraries there. See the docs.

[inmogr]

Hi,

Thanks,
I have followed those steps, but the issue I'm facing i guess is a combination of Angular Guard and Angular Fire. I'll try to create a sample new project and upload it into GitHub then I'll share the link.

I'll just need some time.

Regards,
Morhaf

---

From: Steve [e-mail]
Sent: Tuesday, January 22, 2019 3:40:33 AM
To: angular/angularfire2
Cc: Morhaf Shamia; Mention
Subject: Re: [angular/angularfire2] The XMLHttpRequest compatibility library was not found. (#1766)

@inmogrhttps://github.com/inmogr With SSR you should have a server.ts (or whatever you want to name it) which has your express app. Import the required libraries there. See the docshttps://angular.io/guide/universal.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/angular/angularfire2/issues/1766#issuecomment-456180483, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AZFRIcs6_0CtJz_qkHh_l0oBbBahveOHks5vFhexgaJpZM4VBz6Z.