Aurelia-cli bundler 1.0.0 beta + firebase

I’ve just fired up a new project selecting the built in bundler + requireJs. I’m getting an error running au build and don’t have the faintest idea where to start looking for the problem!

I’ve set up the paths in tsconfig.json and aurelia.json as per the documentation.
I’m using Yarn

I have two files in the app that refer to firebase:

auth-service.ts

import * as firebase from "firebase/app";
import "firebase/auth";
import { Router } from "aurelia-router";

import { autoinject } from "aurelia-framework";

@autoinject
export class AuthService {
  public user: firebase.User;
  public userLoggedIn = false;
  public authToken = null;
  public config: firebase.app.App;

  constructor(private readonly router: Router) {
    this.config = firebase.initializeApp({
      apiKey: "XXXX",
      authDomain: "XXX",
      databaseURL: "XXX,
      projectId: "XXX",
      storageBucket: "XXX",
      messagingSenderId: "XXX"
    });

    this.config.auth().onAuthStateChanged(user => {
      this.userLoggedIn = user ? true : false;
      this.user = user;
    });
  }

  public async login() {
    let provider = new firebase.auth.GoogleAuthProvider();

    try {
      const result = await this.config.auth().signInWithPopup(provider);
      this.authToken = (result.credential as any).accessToken;
      this.userLoggedIn = true;
      console.log(this.user);
    } catch (err) {
      console.log(err);
    }
  }
}

and
app.ts

import { AuthService } from "services/auth-service";
import { autoinject } from "aurelia-framework";

@autoinject
export class App {
  public user: firebase.User;
  public userLoggedIn = false;

  constructor(private readonly authService: AuthService) {  }

  public async login() {
    await this.authService.login();
    this.user = this.authService.user;
    this.userLoggedIn = this.authService.userLoggedIn;
    console.log(this.authService.authToken);
  }
}

I get the following error running au build

> au build
Starting 'readProjectConfiguration'...
INFO [Bundle] Manually adding package: 2.3.0      aurelia-bootstrapper
INFO [Bundle] Manually adding package: 1.0.4      aurelia-loader-default
INFO [Bundle] Manually adding package: 1.8.0      aurelia-pal-browser
INFO [Bundle] Manually adding package: 1.0.0      aurelia-testing
INFO [Bundle] Manually adding package: 2.0.15     text
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'buildTypeScript'
Starting 'writeBundles'...
INFO [Bundler] Tracing files ...
INFO [Bundler] Auto tracing package: 1.0.1      aurelia-event-aggregator
INFO [Bundler] Auto tracing package: 1.3.0      aurelia-framework
INFO [Bundler] Auto tracing package: 1.2.0      aurelia-history-browser
INFO [Bundler] Auto tracing package: 1.0.0      aurelia-loader
INFO [Bundler] Auto tracing package: 1.0.0      aurelia-logging-console
INFO [Bundler] Auto tracing package: 1.0.4      aurelia-metadata
INFO [Bundler] Auto tracing package: 1.8.0      aurelia-pal
INFO [Bundler] Auto tracing package: 1.3.0      aurelia-polyfills
INFO [Bundler] Auto tracing package: 1.6.3      aurelia-router
INFO [Bundler] Auto tracing package: 1.5.1      aurelia-templating-binding
INFO [Bundler] Auto tracing package: 1.7.1      aurelia-templating-resources
INFO [Bundler] Auto tracing package: 1.3.3      aurelia-templating-router
INFO [Bundler] Auto tracing package: 5.5.4      firebase
ERROR [Bundler] Failed to do transforms
INFO [Bundler] TypeError: Cannot read property 'toString' of null
{ uid: 9,
  name: 'writeBundles',
  branch: false,
  error:
   TypeError: Cannot read property 'toString' of null
       at exports.BundledSource.get contents [as contents] (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundled-source.js:34:46)
       at exports.BundledSource.transform (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundled-source.js:204:16)
       at items.forEach.item (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundler.js:148:26)
       at Array.forEach (<anonymous>)
       at doTranform (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundler.js:145:18)
       at Utils.runSequentially.then (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundler.js:218:22)
       at process._tickCallback (internal/process/next_tick.js:68:7),
  duration: [ 0, 111358200 ],
  time: 1539630555651 }
{ uid: 0,
  name: '<series>',
  branch: true,
  error:
   TypeError: Cannot read property 'toString' of null
       at exports.BundledSource.get contents [as contents] (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundled-source.js:34:46)
       at exports.BundledSource.transform (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundled-source.js:204:16)
       at items.forEach.item (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundler.js:148:26)
       at Array.forEach (<anonymous>)
       at doTranform (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundler.js:145:18)
       at Utils.runSequentially.then (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundler.js:218:22)
       at process._tickCallback (internal/process/next_tick.js:68:7),
  duration: [ 2, 530979300 ],
  time: 1539630555660 }
TypeError: Cannot read property 'toString' of null
    at exports.BundledSource.get contents [as contents] (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundled-source.js:34:46)
    at exports.BundledSource.transform (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundled-source.js:204:16)
    at items.forEach.item (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundler.js:148:26)
    at Array.forEach (<anonymous>)
    at doTranform (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundler.js:145:18)
    at Utils.runSequentially.then (C:\Visual Studio\AtlContracts\Client\node_modules\aurelia-cli\lib\build\bundler.js:218:22)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Sounds like an issue of the subfolder import. @huochunpeng might another library that needs some special love?

Wow - that was fast.

In my previous webpack apps, I used:

import * as firebase from "firebase/app";

I just changed it to

import * as firebase from "firebase";

and it works now.

Whoops - spoke too soon.

I managed to get it to build with import * as firebase from "firebase" and then tried au run --watch which now gives me:

> au run --watch
Starting 'readProjectConfiguration'...
INFO [Bundle] Manually adding package: 2.3.0      aurelia-bootstrapper
INFO [Bundle] Manually adding package: 1.0.4      aurelia-loader-default
INFO [Bundle] Manually adding package: 1.8.0      aurelia-pal-browser
INFO [Bundle] Manually adding package: 1.0.0      aurelia-testing
INFO [Bundle] Manually adding package: 2.0.15     text
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildTypeScript'...

<--- Last few GCs --->

[11572:000001EB1380CD70]     1549 ms: Scavenge 57.6 (70.5) -> 54.1 (74.5) MB, 2.4 / 0.0 ms  (average mu = 0.989, current mu = 0.989) allocation failure
[11572:000001EB1380CD70]     1713 ms: Scavenge 61.6 (74.5) -> 57.4 (92.0) MB, 2.6 / 0.0 ms  (average mu = 0.989, current mu = 0.989) allocation failure
[11572:000001EB1380CD70]     2089 ms: Scavenge 73.0 (93.5) -> 62.9 (97.5) MB, 4.0 / 0.0 ms  (average mu = 0.989, current mu = 0.989) allocation failure


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0000017A129DC6C1]
    1: InternalFrame [pc: 0000017A129919C9]
Security context: 0x00efaa91e681 <JSObject>
    2: nextToken(aka nextToken) [000002F49392C2F9] [C:\Visual Studio\AtlContracts\Client\node_modules\typescript\lib\typescript.js:~16817] [pc=0000017A12A58A1F](this=0x032d946826f1 <undefined>)
    3: isDeclaration(aka isDeclaration) [000002F49392C8C9] [C:\Visual Studio\AtlContracts\Client\node_modules\typescript...

FATAL ERROR: Zone Allocation failed - process out of memory
 1: 00007FF7817AEEE5
 2: 00007FF781788CD6
 3: 00007FF7817896E0
 4: 00007FF781BF0D3E
 5: 00007FF781BF0C6F
 6: 00007FF781B2B083
 7: 00007FF781B2AEB7
 8: 00007FF78209EDAC
 9: 00007FF78209EC0F
10: 00007FF782041485
11: 00007FF78203943F
12: 00007FF78203B91D
13: 00007FF78203746F
14: 00007FF781F689E6
15: 00007FF781F6B30C
16: 00007FF781F67762
17: 00007FF781B752C8
18: 00007FF781B76C62
19: 00007FF781B77276
20: 00007FF781B791FD
21: 00007FF781D961ED
22: 0000017A129DC6C1

I have 16 GM RAM with 10.9 GB free

I’ll reboot the computer and see if this clears up

Ok - rebooted, and was able to build and run.

In Chrome developer I see this message

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

This is a cli bug. I didn’t anticipate that firebase npm package subfolder firebase/app has another package.json file to describe the main/module/browser.

The whole firebase setup is very strange. Have a look of https://www.npmjs.com/package/@firebase/app

The firebase npm package uses those scoped packages in dependencies. Why are they trying to be so smart?

You know what. Directly using scoped packages works fine, I don’t understand why they need the super smart wrapper.

import "@firebase/polyfill";
import firebase from "@firebase/app";
import "@firebase/auth";

But I will still try to add cli support of this kind of wrapper.

FYI, have a look of the content in node_modules/firebase/app/dist/index.esm.js (and any other subfolders), it just wraps around the scoped package, does nothing more.

I tried that but get

By the way - how do I turn off the annoying gulp notifications??

First, you have something on app.ts line6? Ok I saw it, some typing not loaded.
Second, my fault, it is import firebase from "@firebase/app";

You need this for app.ts too.

import "@firebase/polyfill";
import firebase from "@firebase/app";

I’m getting Cannot find namespace "firebase"
with import firebase from "@firebase/app";

I am not familiar with TS typing system.

import firebase from "@firebase/app";
console.log('firebase', firebase);

I can see in the log firebase object has User property defined.
But TS still complains about error TS2503: Cannot find namespace 'firebase' on public user: firebase.User;.

Good news @jeremyholt

Convert back your code to

/* need this import line in app.ts too */
import * as firebase from "firebase/app";
import "firebase/auth";

Update your package.json

"aurelia-cli": "huochunpeng/cli#nd1",

yarn again, it should work now. I will create a PR soon.

For gulp notification, I don’t know about windows. But if you are on Mac, goto “System Preferences” -> “Notifications”, turn off terminal-notifier.

Nearly …

The new version builds, but at runtime I’m now getting
Uncaught syntax error: Invalid Unicode escape sequence : vendor-bundle.js: 47181

image

This is 47181

define('aurelia-templating-resources/dist/commonjs/update-trigger-binding-behavior',['aurelia-templating-resources/dist\commonjs\update-trigger-binding-behavior'],function(m){return m;});

sh*t, a regression on windows which I did not test :frowning:

Please try again with "aurelia-cli": "huochunpeng/cli#nd2",, thanks!

Fantastic - all working now.

Many thanks for your help
Jeremy

2 Likes

Problem is back again!

Uncaught SyntaxError: Invalid Unicode escape sequence

My package.json is:

{
  "name": "client",
  "description": "An Aurelia client application.",
  "version": "0.1.0",
  "repository": {
    "type": "???",
    "url": "???"
  },
  "license": "MIT",
  "dependencies": {
    "aurelia-animator-css": "^1.0.4",
    "aurelia-bootstrapper": "^2.3.0",
    "aurelia-fetch-client": "^1.6.0",
    "bluebird": "^3.5.2",
    "bootstrap": "^4.1.3",
    "firebase": "^5.5.4",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "numbro": "^2.1.0",
    "popper.js": "^1.14.4",
    "requirejs": "^2.3.6",
    "text": "github:requirejs/text#latest",
    "whatwg-fetch": "^3.0.0"
  },
  "peerDependencies": {},
  "devDependencies": {
    "@types/jest": "^23.3.5",
    "@types/node": "^10.11.6",
    "aurelia-cli": "huochunpeng/cli#nd2",
    "aurelia-loader-nodejs": "^1.0.1",
    "aurelia-pal-nodejs": "^1.1.1",
    "aurelia-testing": "^1.0.0",
    "aurelia-tools": "^2.0.0",
    "browser-sync": "^2.26.0",
    "connect-history-api-fallback": "^1.5.0",
    "debounce": "^1.2.0",
    "event-stream": "^4.0.1",
    "gulp": "^4.0.0",
    "gulp-changed-in-place": "^2.3.0",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.0",
    "gulp-rename": "^1.4.0",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-tslint": "^8.1.3",
    "gulp-typescript": "^5.0.0-alpha.3",
    "gulp-watch": "^5.0.1",
    "jest": "^23.6.0",
    "jest-cli": "^23.6.0",
    "minimatch": "^3.0.4",
    "plugin-error": "^1.0.1",
    "through2": "^2.0.3",
    "ts-jest": "^23.10.4",
    "tslint": "^5.11.0",
    "typescript": "^3.1.2",
    "vinyl-fs": "^3.0.3"
  },
  "jest": {
    "modulePaths": [
      "<rootDir>/src",
      "<rootDir>/node_modules"
    ],
    "moduleFileExtensions": [
      "js",
      "json",
      "ts"
    ],
    "transform": {
      "^.+\\.ts$": "ts-jest"
    },
    "testRegex": "\\.spec\\.(ts|js)$",
    "setupFiles": [
      "<rootDir>/test/jest-pretest.ts"
    ],
    "testEnvironment": "node",
    "collectCoverage": true,
    "collectCoverageFrom": [
      "src/**/*.{js,ts}",
      "!**/*.spec.{js,ts}",
      "!**/node_modules/**",
      "!**/test/**"
    ],
    "coverageDirectory": "<rootDir>/test/coverage-jest",
    "coverageReporters": [
      "json",
      "lcov",
      "text",
      "html"
    ]
  }
}
1 Like