Microsoft-authentication-library-for-js: import msal with es6 syntax

[TulyOpt]

Hello,

Apparently (see https://stackoverflow.com/questions/44228493/how-to-properly-import-and-use-the-msal-microsoft-authentication-library-for-js) it is not possible to import msal in an es6 style i.e. like :

import {Msal} from 'msal';
var msal   = new Msal.UserAgentApplication ....

Is there a reason ? If not, would it possible to make it possible ? Thanks in advance.

[jmprieur]

@TulyOpt : if you clone the repo and change in es5 to es6 here: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/master/tsconfig.base.json#L7, you would generate msal for es6. Would that work for you?

[TulyOpt]

Hi,

thanks for your answer, i will try this.

[DibranMulder]

This guy forked the repo and added all major module implementations, take a look at:
https://github.com/malekpour/microsoft-authentication-library-for-js

[jmprieur]

• @rohitnarula7176

[VSDekar]

Any news on this?

[cesarvarela]

I'm not sure why this isn't the default behavior.

[jmprieur]

I believe that es5 is needed so that msal.js can be used with IE: See https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/Using-msal.js-with-Internet-Explorer.
Do you have ways to run es6 JavaScript with IE?

[pdimitratos]

To my understanding, most es6 features should be available in IE11 with one or more polyfills (such as Babel). You already do this to support promises.

It's strange to me that the new version of the JavaScript auth library requires jumping through more hoops to be used with modern JavaScript frameworks than the ADAL v1 library does.

Is it at least possible to register a second npm package that's built for ES6 by default?

[maggiepint]

Modules don't have the same polyfill-ability as other ESNext features. That said, it should be possible with the right npm configuration to publish both the transpiled ESNext code and the built files. This is what we do with momentjs. All that being said, I'm not sure how that interacts with the typescript here - that's not a space I have a lot of expertise in. I think that @DanielRosenwasser, @bterlson, or @thelarkinn would be able to clarify on that if they're available.

Happy to contribute back the ESNext changes if you're comfortable with that.

[bterlson]

TypeScript will compile standard ES6 modules into a format consumable by IE11. There are other tools that can do this as well. I am also willing to help update this if I am needed.

[akorchev]

There is more than one way to deal with this problem:

1. Set the module compiler option to umd instead of amd. TypeScript will produce a universal module which should work both with Node and browsers.
2. Have another tsconfig which has module set to commonjs. Ship both amd and commonjs files to NPM. Configure package.json to point to the commonjs version: "main": "./out/msal.common.js",

[maggiepint]

I have option 2 nearly done on my local machine. PR coming soon.

On Oct 9, 2017 7:25 AM, "Atanas Korchev" [e-mail] wrote:

There is more than one way to deal with this problem:

1. Set the module compiler option to umd instead of amd. TypeScript
   will produce a universal module which should work both with Node and
   browsers.
2. Have another tsconfig which has module set to commonjs. Ship both
   amd and commonjs files to NPM. Configure package.json to point to the
   commonjs version: "main": "./out/msal.common.js",

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/96#issuecomment-335174101,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFxi0im3yVAd97qJUq4zqLQuZVg0zeZBks5sqizUgaJpZM4OXPVD
.

[rohitnarula7176]

@TulyOpt @jmprieur @maggiepint @akorchev @bterlson @pdimitratos @cesarvarela @DibranMulder @VSDekar I have generated both commonjs and es-6 modules for msal in this branch as you can see in the "lib-commonjs" and "lib-es6" folder. In addition to that, we will ship a UMD bundle that will expose "Msal" as the global variable in the browser located in the 'dist" folder. Since it is not shipped to npm yet, you cannot just use npm install msal and get these yet. For testing though, you can generate a folder named msal in the node_modules folder of your app and clone the repo inside it. You will then be able to use statements like import {UserAgentApplication} from "msal". I have created a test app to test this using what I explained above: Please refer to https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/rohitnarula7176/modules/devApps/ModuleSample/src/components/index.tsx. Can you all please use it and confirm if that solves your issue.

[rohitnarula7176]

@TulyOpt @jmprieur @maggiepint @akorchev @bterlson @pdimitratos @cesarvarela @DibranMulder @VSDekar I have also published a beta version on npm which you can install using npm install [email protected]. You would then be able to import msal using es-6 and commonjs syntax. We will release an official version after testing.

[rohitnarula7176]

Feature is now added to dev and will be part of our next release early next week. Closing this issue for now. Please reopen if you still face issues.

[RobertoPrevato]

@jmprieur, just a comment about your previous sentence and IE support. It's possible to write es5 code that works fine in every situation: direct file download (using script element), module export and AMD definitions. This used to be a quite common technique for libraries. Something like:

;(function(factory) {
  if (typeof module !== "undefined" && module.exports) {
    // Node/CommonJS
    module.exports = factory(this);
  } else if (typeof define === "function" && define.amd) {
    // AMD
    var global=this;
    define("LIBRARY_NAME", function(){ return factory(global);});
  } else {
    // Browser globals
    this.LIBRARY_NAME = factory(this);
  }
}(function(global) {
  var LIBRARY_NAME = {};

  return LIBRARY_NAME;
}));

This would have saved some headaches. I hit this wall when trying to use msal.js in a Vue.js project, now I am going to try with last update mentioned in last comment.