aurelia / bundler

A library for bundling JavaScript, HTML and CSS for use with SystemJS.
MIT License
37 stars 25 forks source link

Bundled App breaks with error : Inject is not a function #77

Closed davidbfrogman closed 8 years ago

davidbfrogman commented 8 years ago

I've clearly broken something and I don't understand what. This is an error I only get on a bundled application. If it's not bundled it works just fine. Here's the code that breaks:

import {inject} from 'aurelia-framework';
import {Router} from "aurelia-router";

@inject(Router)
export class dbpbottomnav {

    constructor(Router){
        this.router = Router;
        console.log(this.router);
    }

    attached() {

    }
}

With the error: Unhandled promise rejection Error: inject is not a function

If I change the code to :

import {inject} from 'aurelia-framework';
import {Router} from "aurelia-router";

export class dbpbottomnav {
    static inject() { return [Router]; }

    constructor(Router){
        this.myRouter = router;
        console.log(this.myRouter);
    }

    attached() {

    }
}

I don't get the error. However I can't go through my entire application and easily change the way that injection works. Not to mention it seems lame to have to do that. I really don't understand what I could have done to screw up bundling this bad. I'd love any help I could get. In other words if I fix the "inject error" in one control, then aurelia just barfs on the next control.

here's the specific babeled js it breaks on:

     value: function shrinkHeroModule(height, offsetForImage) {
            console.log('about to shrink the hero module.');
            $('#hero').height(height);
            $('#hero.module-parallax').parallax('50%', offsetForImage, 0.4);
            $('.hero-caption').fadeOut(500);
          }
        }]);
        var _dbpheader = dbpheader;
        dbpheader = inject(dbpParallax)(dbpheader) || dbpheader;
        return dbpheader;
      })();
      _export('dbpheader', dbpheader);
    }
  };
});

specifically this line: dbpheader = inject(dbpParallax)(dbpheader) || dbpheader;

michaelsmithson commented 8 years ago

Is this caused by using Babel 6 rather than Babel 5?

davidbfrogman commented 8 years ago

So I have at least more details. I have a working repository with version 0.1.9 of aurelia-bundler. However when I upgrade to version 0.3.1 it breaks.

You can take a look at my working code base here: https://github.com/davidbfrogman/DBPHeroku

I can upgrade, and downgrade, and get very reproducible results.

0.1.9 works. 0.3.1 breaks.

davidbfrogman commented 8 years ago

if I run npm install aurelia-bundler --save is there anything else I need to be aware of? Like are there other components (jspm, system.js etc) that I need to upgrade as well? As many details as possible would really help.

Thanks in advance.

davidbfrogman commented 8 years ago

After a lot more struggling. I made a bunch of changes, but the one thing that seemed to work was ""depCache": false,"

I honestly have no idea why that 'fixed' it. Maybe I don't understand what that flag does.

ahmedshuhel commented 8 years ago

@EisenbergEffect Could it be a decorator problem? I will take a look at his repo. Have we upgraded bable that supports decorator?

EisenbergEffect commented 8 years ago

We haven't updated Babel yet. We are still waiting on some dependencies that need to be updated to Babel 6.

ahmedshuhel commented 8 years ago

So we don't support decorator like @inject here. Is that a correct statement?

ahmedshuhel commented 8 years ago

I have to investigate why setting depCache to false solves the problem.