Can't use jsnlog from ES6 client application

[DavidBLynch]

I've been struggling with how to import jsnlog in my Aurelia/ES6 application. Asked a question on SO also. One of the recommendations was to have a separate build output where typescript is set to output to ES6.

import 'jsnlog';            // JL is undefined
import JL from 'jsnlog';    // JL is {}
import {JL} from 'jsnlog';  // JL is undefined

Is this a possibility or is there something I'm missing (likely).

[DavidBLynch]

So it looks like this typescript:

// Support CommonJS module format 

var exports: any;
if (typeof exports !== 'undefined')
{
    exports.JL = JL;
}

compiles into this js:

var exports;
if (typeof exports !== 'undefined') {
    exports.JL = JL;
}

And exports will always be undefined so the export is never made. If I remove the var exports; from the javascript then this works:

import jsnlog from 'jsnlog';

var jsnLogger = jsnlog.JL();
jsnLogger.info(`TEST!`);

[mperdeck]

I understand you fixed the problem :-)

Do you want to answer your SO question as well with your solution, so if someone else has the same issue and finds your SO questions, they benefit from your solution?

[DavidBLynch]

It's not really fixed since I had to modify the jsnlog.js file as per above. My understanding of TypeScript and CommonJS modules is limited, but I can't see how your code would ever execute the exports.JL = JL; line of code.

[mperdeck]

Ok, I will have to look into this a bit deeper. I do want JSNLog to work seamlessly with Aurelia.

Please let me know where I can find your project on Github, so I can reproduce the issue.

[DavidBLynch]

My project is private so it isn't available, but I have recreated my issue by using the basic Aurelia ES6 skeleton app from the website.

Using this as a basis I've update the app.js to be this:

import jsnlog from 'jsnlog';

export class App {
  configureRouter(config, router) {
    var jsnLogger = jsnlog.JL();
    jsnLogger.info(`configureRouter!`);

    config.title = 'Aurelia';
    config.map([
      { route: ['', 'welcome'], name: 'welcome',      moduleId: 'welcome',      nav: true, title: 'Welcome' },
      { route: 'users',         name: 'users',        moduleId: 'users',        nav: true, title: 'Github Users' },
      { route: 'child-router',  name: 'child-router', moduleId: 'child-router', nav: true, title: 'Child Router' }
    ]);

    this.router = router;
  }
}

Which gives this error:

uncaught (in promise) Error: Error invoking RouterView. Check the inner error for details.
inner error: TypeError: jsnlog.JL is not a function
    at App.configureRouter (http://localhost:9000/dist/app.js:23:36)

If I manually edit the jsnlog.js from your distribution (as I described above) and comment out the "var exports" then the logger works:

  //var exports;
  if (typeof exports !== 'undefined') {
    exports.JL = JL;
  }

This fixes the issue because the if can never be true since "var exports" defines exports and thus the code never executes and the JL function is never exported.

[DavidBLynch]

Crap, didn't mean to close this...

[mperdeck]

Sorry for the late reply. Thanks for pointing out this issue. I just released version 2.17.1 which implements your change (removing "var exports").

In the event that this latest version still doesn't work for you, please let me know.