Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:14 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
fysp11commented, Feb 15, 2019

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

Thanks man

2reactions
AnthonyNahascommented, Feb 9, 2019

Im gonna try to fix that ASAP!!!👌

Read more comments on GitHub >

github_iconTop Results From Across the Web

export 'firestore' (imported as 'firebase') was not found in ...
Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app). Google Cloud ...
Read more >
export 'auth' was not found in 'firebase/app' · Issue #179 - GitHub
I've just patched the library and fixed the export bug related to the ssr issue. However, locally Im getting a DI error but...
Read more >
export 'auth' (imported as 'firebase') was not found ... - You.com
I did import firebase from "firebase/app" and did const auth = firebase.auth(); export { auth }; to export. Now the console is showing...
Read more >
export 'default' (imported as 'firebase') was not found in ...
According to the documentation, Apps currently using Firebase Web SDK // version 8 or earlier should consider migrating to version 9 as follows:...
Read more >
auth:import and auth:export | Firebase Documentation - Google
Note: the auth:export command only exports passwords hashed using the scrypt algorithm, which is used by the Firebase backend.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Configurable Password Length

Next page

Feat: flat auth design