SSR Angular Universal 12 and Firebase troubles

[johanchouquet]

Hi everyone,

Not sure if this is a bug for AngularFire to be honest, but this might be the case so, here it is.

I have an app which i could deploy with Angular 11 and Firebase.
I had to put in place the solution with protos described in #2686.
As you can see, the firestore-protos.ts file returns file-loader?name=..., which is a command for webpack 4, with the loader file-loader.

But, in Angular 12, webpack 4 is gone, and we have webpack 5 support, awesome! But, the solution with dir-loader!./firestore-protos simply doesn't work any more.

1st encountered issue:

I get this error:

./node_modules/dir-loader/index.js!./apps/website/firestore-protos.ts - Error: Module build failed (from ./node_modules/dir-loader/index.js):
TypeError: this.exec is not a function
    at Object.module.exports (C:\Users\jct\code\00-wekicards\wekicards\node_modules\dir-loader\index.js:10:22)

And the line in the dir-loader lib:

var options = this.exec(source, this.resource);

So, I've been looking for a solution for quite some time now and I really can't find anything on the subject.

I saw that in the sample app example from angularfire repo, @jamesdaniels removed the use of dir-loader, which seems a good option indeed.
What's the best workaround to do the same thing as the couple [dir-loader / file-loader] to load firestore protos ?

2nd encountered issue:

I also tried to just remove the use of dir-loader by adding a list of externalDependencies in the angular.json file, just like this:

"externalDependencies": [
  "firebase",
  "@firebase/app",
  "@firebase/firestore",
  "@firebase/analytics",
  "@firebase/auth",
  "@firebase/functions",
  "@firebase/installations",
  "@firebase/messaging",
  "@firebase/storage",
  "@firebase/performance",
  "@firebase/remote-config",
  "@firebase/util"
],

But when I try this, I get another error when building my cloud function (well, it's more a Warning at first, but later on deployment it turns into an error):

WARNING in ./apps/functions/dist/website/server/fr/main.js 91:90
Module parse failed: The keyword 'let' is reserved (91:90)
File was processed with these loaders:
 * ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
|             constructor() { super(...arguments), this.overrides = { pinch: { enable: !1 }, rotate: { enable: !1 } }; }       
|         }
>         exports.MyHammerConfig = MyHammerConfig, MyHammerConfig.\u0275fac = function () { let \u0275MyHammerConfig_BaseFactory; return function MyHammerConfig_Factory(t) { return (\u0275MyHammerConfig_BaseFactory || (\u0275MyHammerConfig_BaseFactory = 
i0.\u0275\u0275getInheritedFactory(MyHammerConfig)))(t || MyHammerConfig); }; }(), MyHammerConfig.\u0275prov = i0.\u0275\u0275defineInjectable({ token: MyHammerConfig, factory: MyHammerConfig.\u0275fac });
|         const customConfig = { include: ["facebook", "twitter", "whatsapp", "linkedin", "email", "sms"], gaTracking: !0, sharerMethod: ngx_sharebuttons_1.SharerMethod.Window };
|         class AppModule {

WARNING in ./apps/functions/dist/website/server/en/main.js 91:90
Module parse failed: The keyword 'let' is reserved (91:90)
File was processed with these loaders:
 * ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
|             constructor() { super(...arguments), this.overrides = { pinch: { enable: !1 }, rotate: { enable: !1 } }; }       
|         }
>         exports.MyHammerConfig = MyHammerConfig, MyHammerConfig.\u0275fac = function () { let \u0275MyHammerConfig_BaseFactory; return function MyHammerConfig_Factory(t) { return (\u0275MyHammerConfig_BaseFactory || (\u0275MyHammerConfig_BaseFactory = 
i0.\u0275\u0275getInheritedFactory(MyHammerConfig)))(t || MyHammerConfig); }; }(), MyHammerConfig.\u0275prov = i0.\u0275\u0275defineInjectable({ token: MyHammerConfig, factory: MyHammerConfig.\u0275fac });
|         const customConfig = { include: ["facebook", "twitter", "whatsapp", "linkedin", "email", "sms"], gaTracking: !0, sharerMethod: ngx_sharebuttons_1.SharerMethod.Window };
|         class AppModule {
!  functions: package.json indicates an outdated version of firebase-functions.
Please upgrade using npm install --save firebase-functions@latest in your functions directory.

=== Deploying to 'myproject-staging'...

i  deploying functions
+  functions: Finished running predeploy script.
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
+  functions: required API cloudbuild.googleapis.com is enabled
+  functions: required API cloudfunctions.googleapis.com is enabled
i  functions: preparing / directory for uploading...

Error: Error occurred while parsing your function triggers.

Error: Module parse failed: The keyword 'let' is reserved (91:90)
File was processed with these loaders:
 * ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
|             constructor() { super(...arguments), this.overrides = { pinch: { enable: !1 }, rotate: { enable: !1 } }; }       
|         }
>         exports.MyHammerConfig = MyHammerConfig, MyHammerConfig.\u0275fac = function () { let \u0275MyHammerConfig_BaseFactory; return function MyHammerConfig_Factory(t) { return (\u0275MyHammerConfig_BaseFactory || (\u0275MyHammerConfig_BaseFactory = 
i0.\u0275\u0275getInheritedFactory(MyHammerConfig)))(t || MyHammerConfig); }; }(), MyHammerConfig.\u0275prov = i0.\u0275\u0275defineInjectable({ token: MyHammerConfig, factory: MyHammerConfig.\u0275fac });
|         const customConfig = { include: ["facebook", "twitter", "whatsapp", "linkedin", "email", "sms"], gaTracking: !0, sharerMethod: ngx_sharebuttons_1.SharerMethod.Window };
|         class AppModule {
    at Object.<anonymous> (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:211:7)
    at __webpack_require__ (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:20:30)
    at webpackContext (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:190:9)
    at C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:166:61
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:165:19)
    at __webpack_require__ (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:20:30)
    at Object.<anonymous> (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:121:52)
    at __webpack_require__ (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:20:30)
    at Object.<anonymous> (C:\Users\jct\code\mypath\repo\dist\apps\functions\main.js:109:18)

The problem here is that the main.js files in the 'fr' or 'en' folder are all minified so I can't know exactly the origin of the problem.

A note: the functions app is a node app in our monorepo, which contains the cloud functions to deploy.

And a reminder: everything deploys correctly with Angular Universal 11, and after upgrade to version 12, it stopped at build time for the Cloud Function part.

Also: I did manage to easily migrate all other apps from the monorepo from Angular 11 to Angular 12. All apps started locally, build, and deployed without trouble.
So, I really narrowed down to the problem to SSR Universal, with AngularFire and Firebase (which is kind of very large scope, i know ^^).

Version info

Angular: 12

Firebase: 8.6.1

AngularFire: 6.1.5

Node: 12.22.3 (same in 14.17.3)

** Windows 10 **

Other (e.g. Ionic/Cordova, Node, browser, operating system):

Expected behavior

I expect the SSR Universal to not broke the workflow, when dealing with those protos / dir-loader / webpack 5.

Actual behavior

It's a no go for now for the adoption of Angular 12, because of those points.

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[jamesdaniels]

If you update your Firebase JS SDK to the latest version I don't think you need the proto-loader or to bundle the dependencies anymore. I'm going to be testing this more now that I'm back from leave.