Aurelia CLI build breaks when importing aurelia-auth

[suamikim]

I'm having troubles using aurelia-auth in a simple test project.

What I've done so far:

• Create new project using au new with the following options: Custom, Babel, SASS, No unit testing, WebStorm
• Running the app using au run --watch is working just fine as expected
• Installed aurelia-auth using npm install aurelia-auth --save
• Added import {AuthService} from 'aurelia-auth'; to the top of app.js

The running au run crashes after saving app.js with the following error (besides others):

{
    uid: 10,
    name: 'writeBundles',
    branch: false,
    error:
    { [Error: ENOENT: no such file or directory, open 'C:\path\to\TestApp\src\aurelia-auth.js']
        errno: -4058,
        code: 'ENOENT',
        syscall: 'open',
        path: 'C:\\path\\to\\TestApp\\src\\aurelia-auth.js',
        moduleTree: [ 'app' ],
        fileName: 'C:/path/to/testapp/src/app.js' },
    duration: [ 0, 26425494 ],
    time: 1470057327123
}

Obviously it can't map the imported aurelia-auth correctly to the respective node package but tries to load it from the project sources.

Therefore I've added the dependency myself to vendor-bundle.js in the bundles section of aurelia.json:

{
    "name": "aurelia-auth",
    "path": "../node_modules/aurelia-auth/src",
    "main": "aurelia-auth"
}

Now I'm getting different errors:

commonJs.convert: COULD NOT CONVERT: C:/path/to/TestApp/node_modules/aurelia-auth/src/aurelia-auth.js, so skipping it. Error was: Error: Line 1: Unexpected token
{ uid: 8,
  name: 'writeBundles',
  branch: false,
  error:
   { [Error: Parse error using esprima for file: C:/path/to/TestApp/node_modules/aurelia-auth/src/aurelia-auth.js
   Error: Line 1: Unexpected token]
     moduleTree: [ 'app' ],
     fileName: 'C:/path/to/TestApp/src/app.js' },
  duration: [ 0, 28580305 ],
  time: 1470060694076 }
{ uid: 0,
  name: '<series>',
  branch: true,
  error:
   { [Error: Parse error using esprima for file: C:/path/to/TestApp/node_modules/aurelia-auth/src/aurelia-auth.js
   Error: Line 1: Unexpected token]
     moduleTree: [ 'app' ],
     fileName: 'C:/path/to/TestApp/src/app.js' },
  duration: [ 0, 409250625 ],
  time: 1470060694093 }
{ [Error: Parse error using esprima for file: C:/path/to/TestApp/node_modules/aurelia-auth/src/aurelia-auth.js
Error: Line 1: Unexpected token]
  moduleTree: [ 'app' ],
  fileName: 'C:/path/to/TestApp/src/app.js' }

I'd really appreciate any help with that!

[suamikim]

I was able to make it build by using the path aurelia-auth/dist/amd instead of aurelia-auth/src and manually adding another dependecy for aurelia-fetch-client to vendor-bundle.js in the bundles section of aurelia.json:

{
    "name": "aurelia-auth",
    "path": "../node_modules/aurelia-auth/dist/amd",
    "main": "aurelia-auth"
},
{
    "name": "aurelia-fetch-client",
    "path": "../node_modules/aurelia-fetch-client/dist/amd",
    "main": "aurelia-fetch-client"
}

Is this basically the correct way to handle new dependencies?

[khuongduybui]

I think you can just add their names.

  ...
  "aurelia-fetch-client",
  "aurelia-http-client",
  "aurelia-auth",
  ...

Let me know if that works for you.

[JayDi85]

khuongduybui, it doesn't work. You must add aurelia-auth path manual to aurelia.json file (see post above).

I think that problem in aurelia-auth config file or something else. If you go to "aurelia-http-client/config.js" then you can find different line in path:
"aurelia-http-client/*": "dist/system/*"

But in "aurelia-auth/config.js" that line like that:
"aurelia-auth/*": "dist/*"

[paulvanbladel]

Maybe related to this?
aurelia/cli#212

[brandon-burciaga]

Try this in your aurelia.json bundles dependencies. It should work.

...
{
    "name": "aurelia-auth",
    "path": "../node_modules/aurelia-auth/dist/commonjs",
    "main": "aurelia-auth"
},

[tommasop]

Tried with both:

{
    "name": "aurelia-auth",
    "path": "../node_modules/aurelia-auth/dist/commonjs",
    "main": "aurelia-auth"
},

and

{
    "name": "aurelia-auth",
    "path": "../node_modules/aurelia-auth/dist/amd",
    "main": "aurelia-auth"
},

and it builds the app with au run but when I open the browser I receive the following error:

Unhandled rejection Error: No ValueConverter named "authFilter" was found!
    at ValueConverter.evaluate (http://localhost:9000/scripts/vendor-bundle.js:7194:15)
    at Binding.bind (http://localhost:9000/scripts/vendor-bundle.js:10684:41)
    at Controller.bind (http://localhost:9000/scripts/vendor-bundle.js:22736:19)
    at View.bind (http://localhost:9000/scripts/vendor-bundle.js:20796:24)
    at Controller.bind (http://localhost:9000/scripts/vendor-bundle.js:22758:19)
    at View.bind (http://localhost:9000/scripts/vendor-bundle.js:20796:24)
    at Controller.bind (http://localhost:9000/scripts/vendor-bundle.js:22758:19)
    at Controller.automate (http://localhost:9000/scripts/vendor-bundle.js:22703:12)
    at http://localhost:9000/scripts/vendor-bundle.js:23761:20

I also tried the solution proposed in: aurelia/cli#212 but I receive the same error!

[ghiscoding]

Not sure what your problem is but I got a working Aurelia-CLI sample going. What I use in my aurelia.json file is the following:

"dependencies": [
          ...
          "aurelia-fetch-client",
          "aurelia-http-client",
          {
            "name": "aurelia-auth",
            "path": "../node_modules/aurelia-auth/dist/amd",
            "main": "aurelia-auth"
          },

Perhaps take a look at my Github Project - Realtime-TODO-Aurelia-Auth-RethinkDB to get you going. However please note that I replaced all the mongoDB with RethinkDB

[khuongduybui]

@ghiscoding on a totally different note, RethinkDB went out of business.

[ghiscoding]

@khuongduybui I know but RethinkDB is still an Open Source Project that will live on (even if the maintenance went down drastically), the company might be dead but the project is not.

However, I only posted a link to my project to help others.

[evak2979]

@tommasop

I am getting the same issue as you...

Unhandled rejection Error: No ValueConverter named "authFilter" was found!
    at ValueConverter.evaluate (http://localhost:9000/scripts/vendor-bundle.js:7194:15)
    at Binding.bind (http://localhost:9000/scripts/vendor-bundle.js:10684:41)
    at Controller.bind (http://localhost:9000/scripts/vendor-bundle.js:22736:19)
    at View.bind (http://localhost:9000/scripts/vendor-bundle.js:20796:24)
    at Controller.bind (http://localhost:9000/scripts/vendor-bundle.js:22758:19)
    at View.bind (http://localhost:9000/scripts/vendor-bundle.js:20796:24)
    at Controller.bind (http://localhost:9000/scripts/vendor-bundle.js:22758:19)
    at Controller.automate (http://localhost:9000/scripts/vendor-bundle.js:22703:12)
    at http://localhost:9000/scripts/vendor-bundle.js:23761:20

What's frustrating, is that if I download the project from here: https://github.com/chenkie/aurelia-jwt-auth/tree/master/client

and au build, it works.

I have been comparing aurelia.json files, I have been trying to find how or what's missing from one to the other and I can't figure it out...

Any help is appreciated.

[ghiscoding]

@evak2979 There's couple things that might be worth checking.

Does your aurelia.json have the following?

"paths": {
    "root": "src",
    "resources": "src/resources",
    "elements": "src/resources/elements",
    "attributes": "src/resources/attributes",
    "valueConverters": "src/resources/value-converters",
    "bindingBehaviors": "src/resources/binding-behaviors"
  },
  ...
   "aurelia-fetch-client",
    "aurelia-http-client",
     {
        "name": "aurelia-auth",
        "path": "../node_modules/aurelia-auth/dist/amd",
        "main": "aurelia-auth"
     },

Then in your main.js, does it have this?

import authConfig from './authConfig';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources')
    .plugin('aurelia-auth', (baseConfig)=> {
    	baseConfig.configure(authConfig);
    });

and make sure to add it in your resources/index.js file

export function configure(config) {
  config.globalResources([
    './elements/loading-indicator',
    './value-converters/authenticatedFilter' // <-- HERE
  ]);
}

You also need resources/value-converters/authenticatedFilter.js that looks like this:
EDIT: The file authenticatedFilter.js is actually unnecessary

export class AuthenticatedFilterValueConverter {
  toView(routes, isAuthenticated) {
    if(!routes) return;
    return routes.filter(r => r.config.auth === undefined || r.config.auth === isAuthenticated);
  }
}

I think that I've seen that problem with the authFilter not found before editing my AuthenticatedFilterValueConverter.js. Give it a try or look at mine for inspiration, however please note that mine uses RethinkDB and not Mongo, so the server side is different but the client side is relatively the same.

[evak2979]

@ghiscoding

Thank you for your quick response ! I did go through your code, but there were things I did not understand. In particular:

export class AuthenticatedFilterValueConverter {
  toView(routes, isAuthenticated) {
    if(!routes) return;
    return routes.filter(r => r.config.auth === undefined || r.config.auth === isAuthenticated);
  }
}

According to naming convention, this should be used as authenticatedFilter if we are using it as a valueconverter, but we're not... it's only authFilter that it's used. I even did a search for authFilter in both our projects. We have the exact same entries in app and vendor bundle, and it's only used in the nav-bar html.
What is even more odd, is that usually one needs to require the value converters (in JSPM we needed to at least), but here there is no require required.... which has me guessing it -has- to be part of the final app bundle, or vendor bundle. And though it appears it is, it's not loaded... I will try and use the bits you gave tonight and see if I get any different results. But if you have any idea concerning my questions please let me know !Thanks for the help so far.

-- Edit
It was a typo in loading the plugin that gave me the issue. I found it by following your suggestions to the letter. A ton of thanks; which also means, the extra value converter folders are not needed. None of it is (which had me wonder why there is an AuthenticatedFilter converter there, when it's not being used). I love Aurelia and all things JS. If you'd like to add me up on skype or somesuch to discuss such things I'd love to. All my thanks once more ! :)

[ghiscoding]

@evak2979 I thought that I copied AuthenticatedFilterValueConverter from aurelia-auth-sample but it's actually not there. I might have provided you wrong information about that particular file, it might not be called at all. I will have to check for that after work and perhaps update my repo if need be. Thanks

I'm also a starter on Aurelia which is for personal use at this point (wish that I could push it at work too in the future). However I try to contribute when I can... Few weeks ago, I created Aurelia-Slickgrid which is a datagrid and Aurelia-Bootstrap-Plugins which is a set of common plugins available to Aurelia, it includes Bootstrap-Tagsinput, Bootstrap-Datetimepicker, Typeahead.js (soon), Bootstrap-Select, and more to come. You can talk to me there, you can use them and maybe contribute too. :)

EDIT
Thanks @evak2979 for pointing out that the filter AuthenticatedFilterValueConverter is totally unnecessary and is indeed not named correctly as pointed out. I removed it from my repo. Thanks again, that's what the community is for :)