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

[wilson-jw]

facing the same issue, any update on this?

[KwFung7]

Any update on this ? Its a critical bug that will block the module initialisation

[cvabanuk3]

Any resolution for this please, hitting the same with
"@azure/msal-browser": "3.16.0",
"@azure/msal-react": "2.0.18",

[samuelru]

Solution

I resolved this issue for my nuxt2 application by using babel and adding the following two rules to the webpack config. Add the two rules to your config as requested by your webpack setup. I hope this will also work for you guys.

# This is my package.json

"dependencies": {
...
    "@azure/msal-browser": "^3.23.0",
    "babel-loader": "^8.4.1",
    "@babel/preset-env": "^7.25.4"
...
}

"devDependencies": {
...
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.3",
...
}

# This is my nuxt.config.js (nuxt2)

build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      // Add babel-loader for @azure/msal-browser
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      });
      // Add babel-loader for @azure/msal-browser
      config.module.rules.push({
        test: /\.cjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      });
    },
  },