Angular with SSR firebase bug

[vforv]

There is a bug with [email protected]

When install last version of firebase getting error on my server:

/dist/server.js:75602
if (self && 'firebase' in self) {
^
ReferenceError: self is not defined

With version 5.7.3 works fine.

I am using Angular 7 with server side rendering and @angular/fire": "^5.1.3" pkg as well.

[google-oss-bot]

I found a few problems with this issue:

• I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.
• This issue does not seem to follow the issue template. Make sure you provide all the required information.

[Feiyang1]

Thanks for reporting the issue! We didn't consider SSR use case when adding the condition. We will fix it in the next release.

Can you please downgrade firebase to <= 5.10.0 as a workaround?

[amit-ahire]

/var/www/html/project-name/dist/server.js:102897
if (self && 'firebase' in self) {
^
ReferenceError: self is not defined

I'm also Facing the same issue after I updated the packages
Now I have angular v7.2.14, firebase v5.11.1 & @angular/fire v5.1.3
Earlier it was working perfectly

[mezzo9]

Why is this closed?
Will you please let us know if there have there been any solutions?
I tried the latest version, and all the other ones back to 5.0.0 and none of them work. the build:ssr works just fine, but serve:ssr throws the error mentioned above.

[Feiyang1]

Github automatically closed it when I mentioned it is fixed in #1757. Reopening it till it's released.

This check is only added in 5.11.0, so previous versions should work, or you are facing a different issue.

[mezzo9]

Thanks for your clarification.
You are correct in that this change is introduced in this version. When using other versions, I get different errors. which didn't make sense to open issues for those. if we can fix this one, then we are all happy :)

Is there a way I can use the fix in #1757 before release if it is going to take a while to release?
Thank you very much for your help.

[Feiyang1]

You can use npm install firebase@canary. We should have a release soon though.

[mezzo9]

Thank you very much.
After uninstalling the latest, and then installing the canary version, That error went away.
however, it was replaced by a new one:
Please note it builds fine, but when SSR app, this happens.

var major = parseInt(firebase_app__WEBPACK_IMPORTED_MODULE_6__["SDK_VERSION"].split('.')[0]);
^

TypeError: Cannot read property 'split' of undefined

[mezzo9]

Found a temporary solution in case others are interested too.
Besides Firebase, you should also install an older version of Angular Fire.
uninstall current installation:
npm uninstall @angular/fire firebase --save

then install older version, I did below:
npm install @angular/[email protected] [email protected] --save

Everything worked after this.

[Feiyang1]

6.0.2 is out with the fix.

@mezzo9 is the following code snippet from your code? I did a search and it is not in firebase source code.
var major = parseInt(firebase_app__WEBPACK_IMPORTED_MODULE_6__["SDK_VERSION"].split('.')[0]);.

Could you open a new issue if it's different than the reported issue in this thread?

[raberana]

Please note it builds fine, but when SSR app, this happens.

var major = parseInt(firebase_app__WEBPACK_IMPORTED_MODULE_6__["SDK_VERSION"].split('.')[0]);
^

TypeError: Cannot read property 'split' of undefined

@mezzo9 I am also facing this issue, found a solution?

Hi @Feiyang1 , that particular line cannot be exactly found in the source code. However, I can see the property SDK_VERSION being used all over the code. Perhaps there's something wrong when this property was handled by webpack? (I don't know what I am saying but thanks for helping us out in this issue)
We'll try to investigate more.

[dasmeet]

Please note it builds fine, but when SSR app, this happens.
var major = parseInt(firebase_app__WEBPACK_IMPORTED_MODULE_6__["SDK_VERSION"].split('.')[0]);
^
TypeError: Cannot read property 'split' of undefined

@mezzo9 I am also facing this issue, found a solution?

Hi @Feiyang1 , that particular line cannot be exactly found in the source code. However, I can see the property SDK_VERSION being used all over the code. Perhaps there's something wrong when this property was handled by webpack? (I don't know what I am saying but thanks for helping us out in this issue)
We'll try to investigate more.

I am also facing the same issue...
Cannot read property 'split' of undefined

var major = parseInt(firebase_app__WEBPACK_IMPORTED_MODULE_6__["SDK_VERSION"].split('.')[0]);
var minor = parseInt(firebase_app__WEBPACK_IMPORTED_MODULE_6__["SDK_VERSION"].split('.')[1]);

[Feiyang1]

That's really weird. Can you create a repro and share it?

[mezzo9]

@dasmeet, The only solution that worked for me is to use an old version.
Both for firebase, and Angularfirebase.
Below version worked for me and SSR is rendering html:

npm install @angular/[email protected] [email protected] --save

[dasmeet]

@dasmeet, The only solution that worked for me is to use an old version.
Both for firebase, and Angularfirebase.
Below version worked for me and SSR is rendering html:

npm install @angular/[email protected] [email protected] --save

Thanks @mezzo9. That works. Unfortunately that version has some errors with Cloud Messaging. But that's not important for me right now.

[raberana]

Hi @Feiyang1, I just saw this warning during an SSR build of our app.

WARNING in ./node_modules/@angular/fire/firestore/firestore.js 23:21-32
"export 'SDK_VERSION' was not found in 'firebase/app'
 @ ./node_modules/@angular/fire/firestore/public_api.js
 @ ./node_modules/@angular/fire/firestore/index.js
 @ ./dist/server/main.js
 @ ./server.ts

WARNING in ./node_modules/@angular/fire/firestore/firestore.js 24:21-32
"export 'SDK_VERSION' was not found in 'firebase/app'
 @ ./node_modules/@angular/fire/firestore/public_api.js
 @ ./node_modules/@angular/fire/firestore/index.js
 @ ./dist/server/main.js
 @ ./server.ts

Checking the firestore.js file, it actually expects an SDK_VERSION property

import { isPlatformServer } from '@angular/common';
import { SDK_VERSION } from 'firebase/app';
export var EnablePersistenceToken = new InjectionToken('angularfire2.enableFirestorePersistence');

Is that property should not be importable?

[Feiyang1]

Okay. The problem is that webpack read the file pointed by module field in package.json when targeting Node. The module field in firebase/app is the esm build which only has a default export, so you are seeing the 'SDK_VERSION' not found error.

The workaround is to force webpack to read the file pointed by the main field which is the cjs build. You can add a the following configuration to webpack.server.config.js:

module.exports = {
...
 resolve: {
    alias: {
      ['firebase/app']: path.resolve(__dirname, 'node_modules/firebase/app/dist/index.cjs.js')
    }
  }
...
}

The discrepancies between the esm build and cjs build is currently a limitation in firebase packaging and type definition. I will take it to the team and see how we can fix it. It is probably a breaking change, so we also need to think about the timing.

A workaround can also be applied at @angular/fire, so you guys don't need to do anything. I think it's probably the best (temporary) solution at this time. Once I have some progress with @angular/fire solution, I will link it here.

[muthufmass]

Even after upgrading to 6.0.2 , still self of undefined error comes up on Angular SSR build. Build succeeds but error comes when you try to run the local server post build

[mc-lovin]

6.0.2 doesn't work for me too. Can someone please paste a sample config which is working. Tried with the module.exports solution suggested above too.

[muhammadomais]

I am getting the same issue, i would appreciate if someone can explain how can we fix it with an example.

[mc-lovin]

How I solved it

Find the npm package where this line was getting bundled from
grep -rn "'firebase' in self" .

In my case it was @firebase/app. I removed the package and it started working fine.

[emanuel-virca]

@Feiyang1 fix worked for me

[Karbashevskyi]

var major = parseInt(firebase_app__WEBPACK_IMPORTED_MODULE_6__["SDK_VERSION"].split('.')[0]);
^

TypeError: Cannot read property 'split' of undefined

[stot3]

@Feiyang1 adding that workaround to the webpack works, and at the moment allows me to build:ssr. Although, when a fix is made, will I need to take workaround out?

[stot3]

Also, this creates another issue with SSR, I do not think this workaround is working properly.

[stot3]

It didn't show a build error but in Cloud Run deployment, there is a problem.

[Feiyang1]

@stot3 no, you don't have to take it out, but you can.

The new error you encounter sounds like a different error than the original issue. Can you please open a new issue with steps to reproduce?

[tarunm007]

HI @Feiyang1 I'm also facing same issue what @stot3 has mentioned. Please check this [https://github.com//issues/1797] (link) for more detail. I'm also facing same IDBIndex reference issue.

[Feiyang1]

We have made the fix for the "SDK_VERSION" issue in @angular/fire angular/angularfire#2079

Once it is released, you won't need the workaround mentioned in #1754 (comment)