I'm trying to use msal-browser as documented here, but from a plain javascript file in a browser. I was originally using a dynamic import and thought that was part of the problem, but I still have the same problem after changing to a static import (with type="module" in the script tag for my JS file). I'm not using React, Angular, or any other framework for this application, but Dojo is available because it's used by other apps on the same site.

Following is my code. msClientId and msTenantId are variables set in another piece of code. msal has a value, but apparently contains no properties or functions. Calling msal.createStandardPublicClientApplication produces "TypeError: msal.createStandardPublicClientApplication is not a function". Logging msal produces "Module {Symbol(Symbol.toStringTag): 'Module'}" in the browser console.

import * as msal from './msal-browser.js';

console.log('Imported MSAL',msal);
const msalObj=msal.createStandardPublicClientApplication({
    auth: {
        clientId: msClientId,
        authority: '/'+msTenantId
    }
});

I suspect it has something to do with the code at the top of the msal-browser.js file, which is as follows:

'use strict';
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.msal = {}));
})(this, (function (exports) { 'use strict';

I've used the browser console to check the values of things in that code. exports is undefined, define is a function, and define.amd is defined. It therefore seems that define(['exports'], factory) would be called when the file is loaded.

How can I use the module's exports?

I'm trying to use msal-browser as documented here, but from a plain javascript file in a browser. I was originally using a dynamic import and thought that was part of the problem, but I still have the same problem after changing to a static import (with type="module" in the script tag for my JS file). I'm not using React, Angular, or any other framework for this application, but Dojo is available because it's used by other apps on the same site.

Following is my code. msClientId and msTenantId are variables set in another piece of code. msal has a value, but apparently contains no properties or functions. Calling msal.createStandardPublicClientApplication produces "TypeError: msal.createStandardPublicClientApplication is not a function". Logging msal produces "Module {Symbol(Symbol.toStringTag): 'Module'}" in the browser console.

import * as msal from './msal-browser.js';

console.log('Imported MSAL',msal);
const msalObj=msal.createStandardPublicClientApplication({
    auth: {
        clientId: msClientId,
        authority: 'https://login.microsoftonline/'+msTenantId
    }
});

I suspect it has something to do with the code at the top of the msal-browser.js file, which is as follows:

'use strict';
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.msal = {}));
})(this, (function (exports) { 'use strict';

I've used the browser console to check the values of things in that code. exports is undefined, define is a function, and define.amd is defined. It therefore seems that define(['exports'], factory) would be called when the file is loaded.

How can I use the module's exports?

• javascript
• msal.js

2 Answers 2

This code snippet is designed to be compatible with different module environments: CommonJS, AMD, and script mode:

'use strict';
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.msal = {}));
})(this, (function (exports) { 'use strict';

You can use it like this:

<script src="./msal-browser.js"></script>

<script>
  console.log(window.msal);
</script>

If you wish to use it in a modular way, you can employ a module loader like requirejs:

<script    
  src="https://cdnjs.cloudflare/ajax/libs/require.js/2.3.7/require.min.js"
  integrity="sha512-J5ha2LF4Le+PBQnI5+xAVJDR+sZG9uSgroy4n/A6TLjNkvYQbqZA8WHZdaOvJ0HiKkBC9Frmvs10rFDSHKmveQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

<script>
  require(['./msal-browser.js'], function (msal) {
    console.log(msal);
  });
</script>

If you wish to use modern module specifications, please use the ESM version of the script.

Here's my solution that works when Dojo is present and doesn't require any changes to msal-browser.js.

First ensure that my JS file isn't a module, so it's referenced with a script tag like this: <script src="/my-app-path/js/MyCode.js"></script>

Then have a variable in the above script which is set when the script is loaded, storing the src attribute's value. In my case I've created an object within window; that code starts like this:

window.MyObject=window.MyObject || {
    src: document.currentScript.src,

Finally, I use the above src to produce an absolute path to msal-browser.js, and pass that to require as follows:

    authenticate: function() {
        require([this.src.substring(0,this.src.lastIndexOf('/'))+'/msal-browser.js'],function(msal) {
            // Now we can use msal.
        }
    }