msal-browser error: Module not found: Can't resolve '@azure/msal-common' in...\..\node_modules\@azure\msal-browser\dist'

[dianahamzea]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.9.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.0.11

Public or Confidential Client?

Public

Description

Hello, I am trying to switch from ADAL authentication to MSAL authenticationI am using React JS. The issue is that the only version of @azure/msal-browser is 2.38.3 which is deprecated. I want to use newer version but I ran into this error
./node_modules/@azure/msal-browser/dist/index.mjs

Module not found: Can't resolve '@azure/msal-common' in '...\node_modules@azure\msal-browser\dist'

I tried different versions of msal-browser abve 3.0.0 which are not deprecated, but I have same result.

I also tried to install @azure/msal-common with a matching version with msal-browser based on the dependecies in package-lock.json.

Currently I have this setup in packaje.json

"@azure/msal-browser": "^3.9.0",

"@azure/msal-common": "^14.7.0",

"@azure/msal-react": "^2.0.11",

"react": "^16.14.0",

I use node 14.19.0

I saw same issue at #6714 , but it's closed with no working solutions

Error Message

./node_modules/@azure/msal-browser/dist/index.mjs

Module not found: Can't resolve '@azure/msal-common' in '...\node_modules@azure\msal-browser\dist'

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

msalConfig = {
            auth: {
                clientId: clientID,
                authority:authority,
                redirectUri: window.location.origin + "/loginResult",
            },
            cache: {
                cacheLocation: 'sessionStorage',
            },

Relevant Code Snippets

import { PublicClientApplication} from "@azure/msal-browser";

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isAuthenticated: false,
            accessToken: null,
        };

         this.msalConfig = {
            auth: {
                clientId: clientID,
                authority:authority
                redirectUri: window.location.origin + "/loginResult", 
            },
            cache: {
                cacheLocation: 'sessionStorage', 
            },
        };

        this.pca = new PublicClientApplication(this.msalConfig);
    }
//as soon as PublicClientApplication is imported I get this error

Reproduction Steps

1. npm install @azure/msal-react @azure/msal-browser @azure/msal-common
2. import { PublicClientApplication} from "@azure/msal-browser";
3. error is displayed after npm start

Expected Behavior

should not get an error

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome, Edge

Regression

@azure/msal-browser 2.38.3

Source

External (Customer)

[waleedhasank]

Facing this same issue. Any leads?

azure/msal-browser version: 3.10.0
@azure/msal-common version: 14.7.1

[kutucode]

I fail to understand how this is not a high priority issue. It literally breaks every webpack project trying to upgrade to a msal version ^3.0.0. We have over 25 web applications written in Vue 2 and all of them have the same issue. All our Vue 3 projects work though. The same for everything that is not Vue3 but uses vite to bundle. This needs an action asap. Can we have a bounty on this?

[dianahamzea]

@kutucode I agree with you, I still have same issue and I am not the only one... I still try to work with a deprecated version and I get an access token but maybe the version is an issue since I still can't have a proper autentication working. Maybe there is a version incompatibilty but I could't find any documentation regarding this.

[EvanShaw]

Same problem for me. I can't speak to the root cause but I found a workaround (at least for webpack). Adding the following alias to my resolve config fixed the issue:

resolve: {
  alias: {
    "@azure/msal-common": path.resolve(
      __dirname,
      "node_modules",
      "@azure",
      "msal-common",
      "dist"
    )
  }
},

One thing I noticed is that even without the workaround I can directly import modules from @azure/msal-common in my source code no problem. Something about the way @azure/msal-browser imports @azure/msal-common seems to trip up webpack.

[tsolman]

Same issue here. Any updates on this?

@azure/msal-browser: 3.11.0