"TypeError: jsnlog_1.JL is not a function" with TypeScript and SystemJS

[icnocop]

Hi.

Thank you for jsnlog.js.

I'm trying to integrate jsnlog.js using TypeScript and SystemJS, similar to issue #24, but it happens with JSNLog 2.25.1.

I've attached a sample Visual Studio solution here.

Basically, this causes the JavaScript run-time error TypeError: jsnlog_1.JL is not a function in chrome:

import { JL } from "jsnlog";

JL().debug("Hello world");

But I'm able to work-around this issue using:

declare var JL;
import "jsnlog";

JL().debug("Hello world");

But then I lose typing.

Any thoughts?

Thank you!

[mperdeck]

Sorry for the late response.

I have no experience with SystemJS and have no idea what is going wrong.

Should you find out and if it is an issue in jsnlog.js, I would be interested in a pull request.

[icnocop]

To get jsnlog to work seamlessly with systemjs, I had to do the following:

update jsnlog to support importing the JL named export from an ES module

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

configure systemjs to load jsnlog as a commonjs module:

System.config({
    map: {
        "jsnlog": "node_modules/jsnlog/jsnlog.js",
    },
    meta: {
        "node_modules/jsnlog/jsnlog.js": {
            "format": "cjs"
        },
    }
});

import jsnlog

/// <reference path="../node_modules/jsnlog/Definitions/jl.d.ts" />
import { JL } from "jsnlog";

use jsnlog

JL().debug("Hello world");

References:
https://stackoverflow.com/questions/35252939/howto-import-jsnlog-module-using-typescript-systemjs-jspm
microsoft/TypeScript#2262
https://stackoverflow.com/questions/42412965/how-to-load-named-exports-with-systemjs

[icnocop]

It seems jsnlog.sln requires Visual Studio 2013.

When I build jsnlog.sln in Visual Studio 2015, I get different results than what's in git.
Most importantly is the jsnlog.js.map file is not re-generated based on my code changes.

I did notice files referenced in jsnlog.sln are missing from git:
.\Definitions\generate.bat
.\Definitions\jsnlog.DefinitelyTypedHeading.txt
.\Definitions\jsnlog.DefinitelyTypedHeading.txt.template
.\Definitions\jsnlog.jl.d.ts

I'm using the master branch.

Here is the output when running minify.bat:

C:\github\icnocop\jsnlog.js>rem Compiles jsnlog.ts into jsnlog.js, and then minifies into jsnlog.min.js 

C:\github\icnocop\jsnlog.js>rem Updates all copies of the jsnlog.* files in for example JSNLog.TestSite. 

C:\github\icnocop\jsnlog.js>Powershell.exe -executionpolicy remotesigned -File minify.ps1 
------ jsnlog.js/minify.ps1 -------
cd : Cannot find path 'C:\Dev\JSNLog\jsnlog.js' because it does not exist.
At C:\github\icnocop\jsnlog.js\minify.ps1:15 char:1
+ cd C:\Dev\JSNLog\jsnlog.js
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : ObjectNotFound: (C:\Dev\JSNLog\jsnlog.js:String) [Set-Location], ItemNotFoundException
    + FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShell.Commands.SetLocationCommand
 
Error: Unable to access jarfile C:\Utils\closure-compiler-v20170423.jar
cat : Cannot find path 'C:\github\icnocop\jsnlog.js\jsnlog.min.js' because it does not exist.
At C:\github\icnocop\jsnlog.js\minify.ps1:28 char:1
+ cat versionheading.txt, jsnlog.min.js | sc jsnlog.min.js.temp
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : ObjectNotFound: (C:\github\icnoc...s\jsnlog.min.js:String) [Get-Content], ItemNotFoundEx 
   ception
    + FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShell.Commands.GetContentCommand
 
del : Cannot find path 'C:\github\icnocop\jsnlog.js\jsnlog.min.js' because it does not exist.
At C:\github\icnocop\jsnlog.js\minify.ps1:29 char:1
+ del jsnlog.min.js
+ ~~~~~~~~~~~~~~~~~
    + CategoryInfo          : ObjectNotFound: (C:\github\icnoc...s\jsnlog.min.js:String) [Remove-Item], ItemNotFoundEx 
   ception
    + FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShell.Commands.RemoveItemCommand
 

C:\github\icnocop\jsnlog.js\Definitions\DefinitionsGenerator>Powershell.exe -executionpolicy remotesigned -File generate.ps1 
Build jl.d.ts
Build jsnlog.d.ts
Build jsnlog_interfaces.d.ts
Run tests, as mandated by DefinitelyTyped
-----------------------------------

Is there a contributing guide? (ex. CONTRIBUTING.md)

Thank you.

[mperdeck]

Thanks for pointing out how to make jsnlog.js work with SystemJs. I'll update the jsnlog.ts and the web site for the next release.

You're right, the .sln file had lots of broken file references. Fixed those now. I use Visual Studio 2017 Community Edition to open that file.

You can find the Google Closure Compiler at
https://github.com/google/closure-compiler

As you found out, the minify.bat / minify.ps1 files were never meant for use by people other than myself. It is part of the build process to create new releases of JSNLog (JavaScript file, Nuget package, website, etc.) It heavily ties in with the other JSNLog related projects. I've now added some comments to that effect.

As far as jsnlog.js is concerned, this simply generates a copyright message with the correct version number, etc. If you want to use your own version of jsnlog.js, you should be fine with just using the TypeScript compiler and a minifier.

No, there is no contributing guide. I am more than happy to receive bug reports and pull requests, but never saw the need for a contributing guide.

[Brandinga]

FYI

this fixes also this one: Angular aot build