Cannot find module '@azure/msal-common'

[georgiossalon]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.5.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

2.0.7

Public or Confidential Client?

Public

Description

For trying purposes, I downloaded these two packages for testing the msal authentication.

I created the simplest React Vite Project. Just by running npm i and then npm run dev I get this error message

Error Message

Uncaught SyntaxError: Unexpected token '!'

!(function webpackMissingModule() { var e = new Error("Cannot find module '@azure/msal-common'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())(), parsedAccount);

Msal Logs

No response

MSAL Configuration

// MSAL configuration
// I replaced the real values with the xxx placeholders
const configuration = {
    auth: {
        clientId: "xxx",
        authority: "xxx",
        redirectUri: "http://localhost:3000"

    }
};

Relevant Code Snippets

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

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

// MSAL configuration
const configuration = {
    auth: {
        clientId: "xxx",
        authority: "xxx",
        redirectUri: "http://localhost:3000"

    }
};

const pca = new PublicClientApplication(configuration);


ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <MsalProvider instance={pca}>
            <App/>
        </MsalProvider>
    </React.StrictMode>,
)

==================================================================================

App.jsx

import {Fragment, useState} from 'react'
import './App.css'
import {
    AuthenticatedTemplate,
    UnauthenticatedTemplate,
    useMsalAuthentication
} from "@azure/msal-react";
import {InteractionType} from "@azure/msal-browser";

function App() {
    const {login, result, error} = useMsalAuthentication(InteractionType.Redirect);
    const [count, setCount] = useState(0)

    return (
        <Fragment>
            <p>Anyone can see this paragraph.</p>
            <AuthenticatedTemplate>
                <p>At least one account is signed in!</p>
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <p>No users are signed in!</p>
            </UnauthenticatedTemplate>
        </Fragment>
    );

}

export default App;

Reproduction Steps

1. npm i

2. npm run dev

Expected Behavior

Run and redirect the user to the MS login page

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

No response

Source

External (Customer)

[georgiossalon]

The code above is from the official documentation: Getting Started

[tnorling]

Double check that @azure/msal-common was actually installed - it's a dependency of msal-browser so should have been. If it is installed, webpack may not be including it in the bundle. That would be something you need to debug with your webpack config.

[dynamite-ready]

Can confirm a similar bug, when following the same instructions found here:
https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-react#installation

Recommendations found in other bug reports suggest installing 'azure/msal-common' directly:
#6310 (comment)

But it doesn't fix the issue either.

I'd suspect a Node version issue, but that needs to be made clear in the documentation, and ideally, provide a description of a work around, if possible.

I'd prefer to see this ticket re-opened, than have to create another similar ticket. As there appear to be a few of the same class on this board (mostly for the Angular version of the library).

[DMiradakis]

Confirmed, same problem for me. Building an Electron app based off of VueJS. The Microsoft Graph Toolkit docs are utterly useless for Electron right now, and they have some major bugs in the MGT libraries when I try to use them in Electron. Awful experience.

I give up the Microsoft Graph Toolkit and decide to take a simple, msal-node approach, and now I'm met with this ridiculous error. I can't win with Microsoft authentication in Electron, it's just horrible.

My environment:

OS
Windows 11 Home 22621.3007

Node versions (both failed):
NodeJS 20.10.0 and NodeJS 16.17.0

Package.json:

{
  "dependencies": {
    "@auth0/auth0-vue": "^1.0.2",
    "@azure/msal-node": "^2.6.2",
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "crypto-js": "^4.1.1",
    "devextreme": "^22.1.3",
    "devextreme-vue": "^22.1.3",
    "dotenv": "^16.0.1",
    "electron-updater": "^6.1.4",
    "jwt-decode": "^3.1.2",
    "pinia": "^2.0.16",
    "powerbi-client": "^2.21.1",
    "sass": "^1.34.1",
    "vue": "^3.2.13",
    "vue-router": "^4.0.1",
    "winston": "^3.8.2",
    "winston-daily-rotate-file": "^4.7.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "autoprefixer": "^10.4.13",
    "devextreme-cli": "1.4.2",
    "devextreme-themebuilder": "^22.1.3",
    "electron": "22.0.0",
    "electron-builder": "^23.6.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "postcss": "^8.4.20",
    "sass-loader": "^10",
    "tailwindcss": "^3.2.4",
    "vue-cli-plugin-electron-builder": "~2.1.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "vue/multi-word-component-names": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

[Rhig]

Hi guys, I also faced this issue, but luckily I had two projects I've been trying to use this on - and in one of them this issue did not occur.
Comparing the projects, it seems like this issue happens when using older versions of react-scripts. Using react-scripts version 5.0.1 seems to have solved the issue for me when using:
"@azure/msal-browser": "3.6.0",
"@azure/msal-react": "2.0.8",

Hope this helps!