Attempted import error: 'AccountEntity' is not exported from '@azure/msal-common'.

[Camiloadh99]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.24.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

2.1.0

Public or Confidential Client?

Public

Description

I have a React app (with create react app) with the following versions installed:

 "dependencies": {
    "@azure/msal-browser": "3.22.0",
    "@azure/msal-react": "2.0.22",
    "react": "17.0.2",
    "typescript": "4.4.3",
  },

It turns out that when importing the PublicClientApplication object the application tells me "Attempted import error: 'AccountEntity' is not exported from '@azure/msal-common'" i try to use differents versions but it's the same.

import "./App.scss";
import { Provider } from "react-redux";
import "bootstrap/dist/css/bootstrap.css";
import { STORE as store, PERSISTOR } from "./store/redux";
import { PersistGate } from "redux-persist/integration/react";
import MainComponent from "./MainComponent";
import "./constants/global.css";
import "./components/pages/styles/Mainpage.css";
import "./constants/responsive.css";
import "./constants/variables.css";
import { setInterceptors } from "./frameworks_and_drivers/Axios";
import { SnackbarProvider } from "notistack";
import { FilterContextProvider } from "./context";
import { Configuration, PublicClientApplication } from "@azure/msal-browser";

setInterceptors();

// MSAL configuration
const configuration: Configuration = {
  auth: {
    clientId: "clientID",
    authority: "authority",
    redirectUri: "redirectUri",
  },
};

const pca = new PublicClientApplication(configuration);

console.log(pca);
function App() {
  return (
    <Provider store={store}>
      <PersistGate persistor={PERSISTOR}>
        <SnackbarProvider maxSnack={3}>
          <FilterContextProvider>
            <MainComponent />
          </FilterContextProvider>
        </SnackbarProvider>
      </PersistGate>
    </Provider>
  );
}
export default App;

Error Message

./node_modules/@azure/msal-browser/dist/index.mjs Attempted import error: 'AccountEntity' is not exported from '@azure/msal-common'.

MSAL Logs

i can't get it because the const msalInstance = new PublicClientApplication(msalConfig);it self is not working

Network Trace (Preferrably Fiddler)

• [ ] Sent
• [X] Pending

MSAL Configuration

{
  auth: {
    clientId: "clientID",
    authority: "authority",
    redirectUri: "redirectUri",
  },
}

Relevant Code Snippets

All appears on app or main index files when import and use a new instance for PublicClientApplication

Reproduction Steps

1. Create react app
2. install @azure/msal-browser and @azure/msal-react
3. Make a new instance for PublicClientApplication
4. Then the error apprears

Expected Behavior

when i make a new instance for PublicClientApplication i can follow with the configuration of the MsalProvider on msal for react putting the msal config

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome, None (Server)

Regression

No response

Source

External (Customer)

[LRR1993]

any update on this, or a version combination that can be used instead ?

[DryJhin]

I had same issue also and managed to fix it by installing "@azure/msal-common": "^14.16.0", my config looks like this

{ "@azure/msal-browser": "^2.39.0", "@azure/msal-react": "^1.5.13", "@azure/msal-common": "^14.16.0", "react": "17.0.2", }

[loclv]

@DryJhin

Thank you for your support!

I solved this problem with your configuration.

[dpascu]

I had same issue also and managed to fix it by installing "@azure/msal-common": "^14.16.0", my config looks like this

{ "@azure/msal-browser": "^2.39.0", "@azure/msal-react": "^1.5.13", "@azure/msal-common": "^14.16.0", "react": "17.0.2", }

Thank you for this solution, @DryJhin. I was using @azure/msal-browser@^4.7.0 and @azure/msal-react@^3.0.6 and the same import error was preventing me to run the app. It would be nice if it gets fixed.