"export 'auth' was not found in 'firebase/app'

fysp11 commented 5 years ago

Bug Report or Feature Request (mark with an `x`)

- [X] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

Windows 10

Versions

Angular CLI: 7.2.3
Node: 10.15.0
OS: win32 x64
Angular: 7.2.2
... animations, cdk, common, compiler, compiler-cli, core
... elements, forms, http, language-service, material
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.3
@angular-devkit/build-angular     0.12.3
@angular-devkit/build-optimizer   0.12.3
@angular-devkit/build-webpack     0.12.3
@angular-devkit/core              7.0.7
@angular-devkit/schematics        7.0.7
@angular/cli                      7.2.3
@angular/fire                     5.1.1
@angular/flex-layout              7.0.0-beta.23
@angular/pwa                      0.12.3
@ngtools/webpack                  7.2.3
@schematics/angular               7.0.7
@schematics/update                0.12.3
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.28.4

Webpack for ServerSide Rendering using AWS Lambda

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    server: './server.ts',
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  externals: [/(node_modules|main\..*\.js)/],
  output: {
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
  },
  module: {
    rules: [{ test: /\.ts$/, loader: 'ts-loader' }],
  },
  optimization: {
    minimize: false,
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {}, // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {},
    ),
  ],
};

My FirebaseModule

import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule, FirestoreSettingsToken } from '@angular/fire/firestore';
import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
import { environment } from 'src/environments/environment';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    NgxAuthFirebaseUIModule.forRoot(environment.firebase,
      null,
      {
        enableFirestoreSync: true,
        toastMessageOnAuthSuccess: false,
        toastMessageOnAuthError: false
      }),
    AngularFirestoreModule.enablePersistence({
      experimentalTabSynchronization: true
    }),
  ],
  providers: [ { provide: FirestoreSettingsToken, useValue: {} } ]
})
export class NgFirebaseModule { }

package.json

{
  "name": "n-g-ws",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "server": "node local.js",
    "build": "npm run build:browser && npm run build:server && npm run build:serverless",
    "deploy": "serverless deploy",
    "build:browser": "ng build --prod",
    "build:server": "ng run nG-ws:server -c=production",
    "build:serverless": "webpack --config webpack.server.config.js --progress --colors --mode=production",
    "build:deploy": "npm run build && npm run deploy"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.1",
    "@angular/cdk": "^7.2.1",
    "@angular/common": "~7.2.1",
    "@angular/compiler": "~7.2.1",
    "@angular/core": "~7.2.1",
    "@angular/elements": "^7.2.1",
    "@angular/fire": "^5.1.1",
    "@angular/flex-layout": "^7.0.0-beta.23",
    "@angular/forms": "~7.2.1",
    "@angular/http": "~7.2.1",
    "@angular/material": "^7.2.1",
    "@angular/platform-browser": "~7.2.1",
    "@angular/platform-browser-dynamic": "~7.2.1",
    "@angular/platform-server": "~7.2.1",
    "@angular/pwa": "^0.12.2",
    "@angular/router": "~7.2.1",
    "@angular/service-worker": "~7.2.1",
    "@ng-toolkit/serverless": "^1.1.50",
    "@ng-toolkit/universal": "^1.1.50",
    "@nguniversal/common": "~7.1.0",
    "@nguniversal/express-engine": "~7.1.0",
    "@nguniversal/module-map-ngfactory-loader": "~7.1.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@ngxs-labs/dispatch-decorator": "^1.1.0",
    "@ngxs/form-plugin": "^3.3.4",
    "@ngxs/logger-plugin": "^3.3.4",
    "@ngxs/router-plugin": "^3.3.4",
    "@ngxs/storage-plugin": "^3.3.4",
    "@ngxs/store": "^3.3.4",
    "@ngxs/websocket-plugin": "^3.3.4",
    "aws-serverless-express": "^3.2.0",
    "bufferutil": "^4.0.1",
    "core-decorators": "^0.20.0",
    "core-js": "^2.5.4",
    "cors": "~2.8.4",
    "cp-cli": "^1.1.0",
    "document-register-element": "^1.7.2",
    "express": "^4.16.4",
    "firebase": "^5.8.0",
    "firebaseui": "^3.5.2",
    "flag-icon-css": "^3.2.1",
    "flex-layout-srcs": "github:angular/flex-layout",
    "hammerjs": "^2.0.8",
    "ngx-auth-firebaseui": "^2.3.0",
    "rxjs": "^6.3.3",
    "ts-loader": "5.3.3",
    "tslib": "^1.9.0",
    "utf-8-validate": "^5.0.2",
    "webpack-cli": "^3.1.2",
    "ws": "^6.1.3",
    "xmlhttprequest": "^1.8.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.12.2",
    "@angular/cli": "~7.2.2",
    "@angular/compiler-cli": "~7.2.1",
    "@angular/language-service": "~7.2.1",
    "@ngxs/devtools-plugin": "^3.3.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.12.18",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.2",
    "tslint": "~5.12.1",
    "typescript": "~3.2.4",
    "webpack-cli": "~3.2.1",
    "opencollective": "^1.0.3",
    "serverless": "1.36.3",
    "serverless-apigw-binary": "^0.4.4"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "nG-ws": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json",
              "src/robots.txt",
              {
                "glob": "**/*",
                "input": "node_modules/ngx-auth-firebaseui/assets/",
                "output": "./assets/"
              }
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
              "src/styles.sass"
            ],
            "scripts": [
              {
                "input": "node_modules/document-register-element/build/document-register-element.js"
              }
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "nG-ws:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "nG-ws:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "nG-ws:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
              "src/styles.sass"
            ],
            "scripts": [],
            "assets": ["src/favicon.ico", "src/assets", "src/manifest.json"]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "none",
              "sourceMap": false,
              "namedChunks": true,
              "extractLicenses": false,
              "vendorChunk": false
            }
          }
        }
      }
    },
    "nG-ws-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "nG-ws:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "nG-ws:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "defaultProject": "nG-ws",
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "sass"
    }
  }
}

Repro steps

Simply call npm run build. When it comes to the serverless part, it throws the warnings (Log 1). If I try to run the npm server (basicly node ./dist/server.js) for Server Side Rendering, it throws the errors (Log 2)

(Log 1) The warnings log from the build:

λ npm run build:serverless && npm run server

> n-g-ws@0.0.0 build:serverless C:\[path to project]
> webpack --config webpack.server.config.js --progress --colors --mode=production

Hash: f1460164ffa99388c614
Version: webpack 4.28.4
Time: 36517ms
Built at: 02/07/2019 12:53:51 PM
    Asset      Size  Chunks             Chunk Names
server.js  11.1 MiB       0  [emitted]  server
Entrypoint server = server.js
 [22] ./node_modules/rxjs/_esm5/index.js + 10 modules 24.9 KiB {0} [built]
      |    11 modules
 [25] ./node_modules/rxjs/_esm5/operators/index.js + 69 modules 133 KiB {0} [built]
      |    70 modules
 [57] ./node_modules/@angular/fire/index.js + 3 modules 5.54 KiB {0} [built]
      |    4 modules
 [84] external "fs" 42 bytes {0} [built]
[118] external "http" 42 bytes {0} [built]
[132] external "url" 42 bytes {0} [built]
[140] ./node_modules/@angular/fire/auth/index.js + 3 modules 3.96 KiB {0} [built]
      |    4 modules
[141] external "crypto" 42 bytes {0} [built]
[156] external "events" 42 bytes {0} [built]
[169] ./node_modules/@angular/fire/firestore/index.js + 12 modules 1010 KiB {0} [built]
      |    13 modules
[170] ./node_modules/@angular/platform-server/fesm5/platform-server.js + 1 modules 62.5 KiB {0} [built]
      |    2 modules
[224] external "https" 42 bytes {0} [built]
[229] external "zlib" 42 bytes {0} [built]
[437] ./dist/server/main.js 550 KiB {0} [built]
[492] ./server.ts + 2 modules 7.28 KiB {0} [built]
      | ./server.ts 1.61 KiB [built]
      |     + 2 hidden modules
    + 481 hidden modules

WARNING in ./node_modules/ngx-auth-firebaseui/esm5/ngx-auth-firebaseui.es5.js 162:31-35
"export 'auth' was not found in 'firebase/app'
 @ ./dist/server/main.js
 @ ./server.ts

WARNING in ./node_modules/ngx-auth-firebaseui/esm5/ngx-auth-firebaseui.es5.js 164:29-33
"export 'auth' was not found in 'firebase/app'
 @ ./dist/server/main.js
 @ ./server.ts

WARNING in ./node_modules/ngx-auth-firebaseui/esm5/ngx-auth-firebaseui.es5.js 166:30-34
"export 'auth' was not found in 'firebase/app'
 @ ./dist/server/main.js
 @ ./server.ts

WARNING in ./node_modules/ngx-auth-firebaseui/esm5/ngx-auth-firebaseui.es5.js 168:29-33
"export 'auth' was not found in 'firebase/app'
 @ ./dist/server/main.js
 @ ./server.ts

WARNING in ./node_modules/@angular/core/fesm5/core.js 18261:15-36
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
 @ ./server.ts 4:0-47 15:0-14

WARNING in ./node_modules/@angular/core/fesm5/core.js 18273:15-102
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
 @ ./server.ts 4:0-47 15:0-14

(Log 1) The errors log when running server:

> n-g-ws@0.0.0 server C:\Users\Waes-013\code\ng\ngws
> node local.js

C:\Users\Waes-013\code\ng\ngws\dist\server.js:248227
var facebookAuthProvider = new firebase_app__WEBPACK_IMPORTED_MODULE_19__["auth"].FacebookAuthProvider();
                                                                                  ^

TypeError: Cannot read property 'FacebookAuthProvider' of undefined
    at Module.<anonymous> (C:\Users\Waes-013\code\ng\ngws\dist\server.js:248227:83)
    at __webpack_require__ (C:\Users\Waes-013\code\ng\ngws\dist\server.js:21:30)
    at Object.JA/2 (C:\Users\Waes-013\code\ng\ngws\dist\server.js:245975:84214)
    at __webpack_require__ (C:\Users\Waes-013\code\ng\ngws\dist\server.js:245975:295)
    at Object.w9D1 (C:\Users\Waes-013\code\ng\ngws\dist\server.js:245975:333418)
    at __webpack_require__ (C:\Users\Waes-013\code\ng\ngws\dist\server.js:245975:295)
    at Object.V7fC (C:\Users\Waes-013\code\ng\ngws\dist\server.js:245975:157956)
    at __webpack_require__ (C:\Users\Waes-013\code\ng\ngws\dist\server.js:245975:295)
    at Object.K011 (C:\Users\Waes-013\code\ng\ngws\dist\server.js:245975:84708)
    at __webpack_require__ (C:\Users\Waes-013\code\ng\ngws\dist\server.js:245975:295)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! n-g-ws@0.0.0 server: `node local.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the n-g-ws@0.0.0 server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Waes-013\AppData\Roaming\npm-cache\_logs\2019-02-07T11_53_56_675Z-debug.log

Mention any other details that might be useful

It looks like the problem is how auth/firebase are imported and exported through ngx-auth-firebaseui package. Not sure though

It might be related to #112

AnthonyNahas commented 5 years ago

@fysp11 thanks for reporting! Im sure that the following issue is a bug but it's not related to #112 I will inspect that soon

fysp11 commented 5 years ago

@AnthonyNahas thanks man

PhotonicDev commented 5 years ago

Literally same problem, same warnings, it has to do something with the way you call firebase within the library, I've tried to work around it by placing NgxAuthFirebaseUIModule.forRoot() inside of app.browser.module.ts to keep it outside of servers reach, but with no luck.

DannyHalm commented 5 years ago

Hello.. I believe the ngx-auth-firebaseUI.forRoot(firebase) should be in app.module.ts, and then could be imported as module in any other module need it, according to the installation instructions. Regards

Sent from my iPhone

On 8 Feb 2019, at 21:14, Beatons notifications@github.com wrote:

Literally same problem, same warnings, it has to do something with the way you call firebase within the library, I've tried to work around it by placing FirebaseUIModule.forRoot() inside of app.browser.module.ts to keep it outside of servers reach, but with no luck.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

PhotonicDev commented 5 years ago

I'm aware of that, I'm trying to do server side rendering, and the library is literally breaking the build, by saying that the WARNING in ./node_modules/ngx-auth-firebaseui/esm5/ngx-auth-firebaseui.es5.js 162:31-35 "export 'auth' was not found in 'firebase/app' @ ./dist/server/main.js @ ./server.ts I'm trying to find a work around, any help would be more than appreciated.

AnthonyNahas commented 5 years ago

Im gonna try to fix that ASAP!!!👌

AnthonyNahas commented 5 years ago

I've just patched the library and fixed the export bug related to the ssr issue. However, locally Im getting a DI error but I cant at the moment find out whether the DI issue is related to the library or to the local demo app...

I would appreciate your help if you can try v.2.3.2

fysp11 commented 5 years ago

Give me an hour and I'll come back to you

fysp11 commented 5 years ago

@AnthonyNahas the issue with exporting auth looks to be solved ✔️ . But I keep getting the following:

Warning: Flex Layout loaded on the server without FlexLayoutServerModule
Error retrieving icon:

I don't know if that's what you were talking about, but I think the @angular/flex-layout is having some trouble during SSR.

UPDATE Using the FlexLayoutServerModule, it still send me the error message, but the application doesn't crash.

It's working 😕

AnthonyNahas commented 5 years ago

@fysp11 the above log is related to flexlayout.. u just need to import the FlexLayoutServerModule in your angular server module file AppServerModule

Still anyone facing any problem with this issue after the patch v2.3.2

fysp11 commented 5 years ago

@AnthonyNahas I realized that some time after. I'm not getting any errors now.

Thanks man

Dragon201701 commented 3 years ago

I just run into the same issue. I am using Ant Design Pro which is a framework build upon umi whichi is built on React.

import request from '@/utils/request';
import * as firebase from "firebase/app";
import "firebase/auth";

export async function fakeAccountLogin(params) {
  return request('/api/login/account', {
    method: 'POST',
    data: params,
  });
}

export async function getFakeCaptcha(mobile) {
  return request(`/api/login/captcha?mobile=${mobile}`);
}

export async function firebaseLogin(params) {
  firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });
}

`

Dragon201701 commented 3 years ago

I just run into the same issue. I am using Ant Design Pro which is a framework build upon umi whichi is built on React.

import request from '@/utils/request';
import * as firebase from "firebase/app";
import "firebase/auth";

export async function fakeAccountLogin(params) {
  return request('/api/login/account', {
    method: 'POST',
    data: params,
  });
}

export async function getFakeCaptcha(mobile) {
  return request(`/api/login/captcha?mobile=${mobile}`);
}

export async function firebaseLogin(params) {
  firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });
}

`

Oh wait, I just found I come to the wrong issue.
Anyway, try:

import firebase from 'firebase'  
require('firebase/auth')`

iSachin30 commented 3 years ago

@Dragon201701 worked like anything. Thanks!!!!

AnthonyNahas / ngx-auth-firebaseui