Failed to resolve module specifier "@azure/msal-common/browser"

[Spitzbua]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.24.0

Wrapper Library

Not Applicable

Wrapper Library Version

Public or Confidential Client?

Public

Description

I installed the @azure/msal-browser via npm install and created an typescript authentication service. The SPA is based on Polymer3 and LIT components. I searched for any related and existing issues but I could not find one with this exact import problem.

The transpiling is fine but when I am launching the app it leads to an import error.
The directory of the failed import contains 2 files:

This is probably the problematic import:

microsoft-authentication-library-for-js/lib/msal-browser/src/index.ts

Line 158 in 7a01aaf

} from "@azure/msal-common/browser";

Thanks for any advice!

Error Message

Uncaught TypeError: Failed to resolve module specifier "@azure/msal-common/browser". Relative references must start with either "/", "./", or "../".

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

{
    auth: {
        clientId: "b5c2e510-xxxx-4feb-b219-xxxxxx",
        authority: "https://login.microsoftonline.com/xxxx",
        redirectUri: "http://localhost:5000/",
        postLogoutRedirectUri: "/", // Indicates the page to navigate after logout.
    },
    cache: {
        cacheLocation: "sessionStorage", // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
        storeAuthStateInCookie: false, // Set this to true if you have to support IE
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        break;
                    case LogLevel.Info:
                        console.info(message);
                        break;
                    case LogLevel.Verbose:
                        console.debug(message);
                        break;
                    case LogLevel.Warning:
                        console.warn(message);
                        break;
                    default:
                        break;
                }
            },
        },
    },
}

Relevant Code Snippets

import { msalConfig, loginRequest } from "./authConfig";
import { PublicClientApplication, AccountInfo, InteractionRequiredAuthError } from "@azure/msal-browser";

export class AuthService {
  private myMSALObj: PublicClientApplication;
  private accountId: string = "";
  private signInType: "popup" | "redirect" | null = null;

  private isIE: boolean;
  private isEdge: boolean;

  constructor() {
    const ua = window.navigator.userAgent;
    const msie = ua.indexOf("MSIE ");
    const msie11 = ua.indexOf("Trident/");
    const msedge = ua.indexOf("Edge/");
    this.isIE = msie > 0 || msie11 > 0;
    this.isEdge = msedge > 0;

    this.myMSALObj = new PublicClientApplication(msalConfig);
    this.initialize();
  }

  private async initialize(): Promise<void> {
    try {
      await this.myMSALObj.initialize();
      const response = await this.myMSALObj.handleRedirectPromise();
      this.handleResponse(response);
    } catch (err) {
      console.error("Initialization error: ", err);
    }
  }
}

Reproduction Steps

Use Authentication service in an LIT-component:

  private async _handleSignInSSO(): Promise<void> {
    
    try {
      await this.authService.signIn("redirect");
      const activeAccount = this.authService.getActiveAccount();
      if (activeAccount) {
        console.log(activeAccount);
      }
    } catch (error) {
      console.error("Error on login:", error);
    }
  }

Expected Behavior

The import is working on runtime.

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

No response

[tnorling]

Make sure your bundler is including the contents of the dist (ESM) folder in addition to the browser folder

[Spitzbua]

@tnorling, thank you for your quick response. I doublechecked the mentioned folders are included. I digged in more and tried different versions of "@azure/msal-browser". The latest version that is working is "@azure/msal-browser": "^2.39.0".

I checked the breaking changes between V2 and V3 but could not find any relathing thing. Do you know anything that could cause the import error between those versions? Thank you!

These are the typescript compiler options used. If I target 'es2020', it leads to an failed module specifier.

const typescriptLib = ['es2017', 'dom'];
const tsCompilerOptions = {
  declaration: true,
  lib: typescriptLib,
  target: 'es2017',
  experimentalDecorators: true,
  useDefineForClassFields: false,
  esModuleInterop: true,
  allowSyntheticDefaultImports: true,
  module: 'esnext',
  rootDir: 'app',
  moduleResolution: 'node',
  typeRoots: [
    "node_modules/@types"
  ],
};

Could this be a related issue #6904?

[lalimasharda]

Hey @Spitzbua , can you make sure that "@azure/msal-common" is installed correctly (version 14.15.0 at least) and the packages are built properly?

[Spitzbua]

/@lalimasharda, it is installed correctly. Otherwise the version "^2.39.0" would not be working. I am pretty sure it's the same bug as described in #6904. Something about the way @azure/msal-browser imports @azure/msal-common seems to trip up webpack/rollup.