Cannot find module '@azure/msal-common' and '@azure/msal-angular' or its corresponding type declarations.

[hansakaRightS]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.0.0-alpha.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

3.0.0-alpha.0

Public or Confidential Client?

Public

Description

import { MsalService } from '@azure/msal-angular';
                            ^^^^^^^^^^^^^^^^^^
import { AuthenticationResult, InteractionRequiredAuthError } from '@azure/msal-common';
                                                                   ^^^^^^^^^^^^^^^^^^^^
                                                                                                           

we can not import the MsalService from @azure/msal-angular.
we noticed this error few hours ago. we are using angular 16.

we also tried following versions. and its same for all those versions.

    "@azure/msal-angular": "^3.0.0",
    "@azure/msal-browser": "^3.0.0",

 "@azure/msal-angular": "^3.0.0-alpha.2",
 "@azure/msal-browser": "^3.0.0-alpha.2"

 "@azure/msal-angular": "^3.0.0-beta.1",
 "@azure/msal-browser": "^3.0.0-beta.1"

Error Message

Cannot find module '@azure/msal-angular' or its corresponding type declarations.

Msal Logs

MSAL Configuration

{
auth: {
        clientId: clientId,
        authority: "B2C_1A_SIGNUP_SIGNIN",
        redirectUri: '/',
        navigateToLoginRequestUrl: false
    },
    cache: {
        cacheLocation: "LocalStoarage",
        storeAuthStateInCookie: false
    }
}

Relevant Code Snippets

import { MsalService } from '@azure/msal-angular';
import { AuthenticationResult, InteractionRequiredAuthError } from '@azure/msal-common';

Reproduction Steps

1. npm i @azure/msal-browser
2. npm i @azure/msal-angular
3. import { MsalService } from '@azure/msal-angular'; to the service.
4. import { AuthenticationResult, InteractionRequiredAuthError } from '@azure/msal-common';

Expected Behavior

Should be able to use MsalService from '@azure/msal-angular'

Identity Provider

Azure B2C Custom Policy

Browsers Affected (Select all that apply)

None (Server)

Regression

No response

Source

External (Customer)

[khamui]

same here! is there already a workaround?

[michaelmairegger]

The release version has this issue too, not only 3.0.0-alpha.0 as the issue owner stated

[hansakaRightS]

    "@azure/msal-angular": "3.0.0-alpha.0",
    "@azure/msal-browser": "3.0.0-alpha.0",
    ```
    we updated the packages like this and installed the `npm i @azure/msal-common` seems to get rid of the error.

[khamui]

thanks! downgrading to 3.0.0-alpha.0 worked for me. Even without installing @azure/msal-common.

[greut]

the content of the package seems borked, https://app.renovatebot.com/package-diff?name=@azure%2fmsal-angular&from=3.0.0-beta.1&to=3.0.0

[hansakaRightS]

any permanent solution for this?

this is how its looks like in the node modules. with the version 3.0.0

[rpastortntt]

It's broken, do not use version ^3.0.0 right now, this fix the issue for now:
"@azure/msal-angular": "3.0.0-beta.1",
"@azure/msal-browser": "3.0.0-beta.1",

[sandrooco]

Wow, they really shit the bed.. see also #5410

[Core121]

Getting the same error on 3.0.0, beta version works fine. Looks like they published incorrectly

[jo-arroyo]

@HansakaSS Thanks for raising this issue. There has been an error in our release process and we are currently working on a fix. Thank you all for your patience.

[mcavazotti]

Getting same error, but only for msal-angular 3.0.0

[hansakaRightS]

also mentioned here #6323

[achrysanthakopoulou]

It's broken, do not use version ^3.0.0 right now, this fix the issue for now: "@azure/msal-angular": "3.0.0-beta.1", "@azure/msal-browser": "3.0.0-beta.1",

Yes, beta.1 seems to be working fine BUT when build runs on azure pipelines or docker (node:18.13-alpine, nginx:1.20.0-alpine), it still throws the same error!
I also reproduced it at angular16-sample-app.

[achrysanthakopoulou]

Oh my. The answer was in front of my eyes!
It was working fine locally due to installing the exact version with npm install.
However, package.json indicated the package as "^3.0.0-beta.1" and not "3.0.0-beta.1" ... I removed the ^ and it worked!

[tnorling]

A fix for this was released last week in versions 3.0.1 of msal-browser and 2.0.1 of msal-angular. Let us know if this is still an issue, thanks!

[bookmountain]

Can confirm that the bug in react version is still there

"@azure/msal-browser": "3.0.1",
"@azure/msal-react": "2.0.1",

another issue is that source-map-loader shows the warning message, we need to ignore the warning message by the following workaround.
fix: ignore webpack warnings by source-map-loader #11752

[achrysanthakopoulou]

Not sure if we have to add those:
"@azure/msal-browser": "3.0.1",
"@azure/msal-angular": "2.0.1",

or those:
"@azure/msal-browser": "3.0.1",
"@azure/msal-angular": "3.0.1",

in our package.json .

Anyway, none of those works:
With 3.0.1 with 2.0.1 versions I get a peer dependency error (I guess the versions should match anyways).
With 3.0.1 versions I get a runtime error that was not there before:
""AADB2C90012: The scope '[a-custom-b2c-scope-here] openid profile offline_access' provided in request is not supported.
Correlation ID: f33ed4a2-4db0-43fa-a734-f7f27586b632
Timestamp: 2023-08-17 14:16:42Z"

[michaelmairegger]

I have the same error with AADB2C90012, but ony when authenticating against Azure B2C, not when autenticating against Azure AD

[achrysanthakopoulou]

Any update on the error I have described? Indeed, this is happening on azure b2c.

Not sure if we have to add those: "@azure/msal-browser": "3.0.1", "@azure/msal-angular": "2.0.1",

or those: "@azure/msal-browser": "3.0.1", "@azure/msal-angular": "3.0.1",

in our package.json .

Anyway, none of those works: With 3.0.1 with 2.0.1 versions I get a peer dependency error (I guess the versions should match anyways). With 3.0.1 versions I get a runtime error that was not there before: ""AADB2C90012: The scope '[a-custom-b2c-scope-here] openid profile offline_access' provided in request is not supported. Correlation ID: f33ed4a2-4db0-43fa-a734-f7f27586b632 Timestamp: 2023-08-17 14:16:42Z"

[michaelmairegger]

Using 3.0.2 and Azure B2C works on my projects

[sandrooco]

@tnorling Yes it is indeed still a problem.
The contents of node_modules@azure/msal-angular only consist of LICENSE, readme.md and package.json.

[Cotspheer]

Same here, any updates? Using the angular-standalone-sample and Node 18.8.0.

{
  "name": "angular-standalone-sample",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "jest"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.5",
    "@angular/common": "^16.1.5",
    "@angular/compiler": "^16.1.5",
    "@angular/core": "^16.1.5",
    "@angular/forms": "^16.1.5",
    "@angular/material": "^16.1.5",
    "@angular/platform-browser": "^16.1.5",
    "@angular/platform-browser-dynamic": "^16.1.5",
    "@angular/router": "^16.1.5",
    "@azure/msal-angular": "^3.0.4",
    "@azure/msal-browser": "^3.1.0",
    "@azure/msal-node": "^2.1.0",
    "rxjs": "~7.8.0",
    "ts-node": "^10.9.1",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.4",
    "@angular/cli": "~16.1.4",
    "@angular/compiler-cli": "^16.1.5",
    "@types/jasmine": "~4.3.0",
    "@types/jest": "^29.5.0",
    "e2e-test-utils": "^0.0.1",
    "jasmine-core": "~4.5.0",
    "jest": "^29.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ts-jest": "^29.1.0",
    "typescript": "~4.9.4"
  }
}

@azure/msal-angular nor @azure/msal-browser are within node_modules.

[hansakaRightS]

    "@azure/msal-angular": "3.0.4",
    "@azure/msal-browser": "3.1.0",

we are using this version with node `v18.17.1`. i can confirm this is working fine.

[jorgeoca]

Can confirm that the bug in react version is still there

"@azure/msal-browser": "3.0.1",
"@azure/msal-react": "2.0.1",

another issue is that source-map-loader shows the warning message, we need to ignore the warning message by the following workaround. fix: ignore webpack warnings by source-map-loader #11752

I can confirm that I am still finding this issue in react

[sirajalam049]

This is really pathetic. It's feb 2024, and the error is still there.

"@azure/msal-browser": "^3.10.0",
"@azure/msal-react": "^2.0.12",

[jorgeoca]

This is really pathetic. It's feb 2024, and the error is still there.

"@azure/msal-browser": "^3.10.0",
"@azure/msal-react": "^2.0.12",

The current workaround for this issue is using the beta version for msal browser:
"@azure/msal-browser": "3.0.0-beta.1",
"@azure/msal-common": "^14.5.0",
"@azure/msal-react": "2.0.8",

[BartusZak]

Samples provided in source code does now work.
https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples

2 kind of exceptions exists:

1. Conflicting peer dependencies when trying to use most bumped answer versions Cannot find module '@azure/msal-common' and '@azure/msal-angular' or its corresponding type declarations. #6310 (comment)
2. Can't resolve @azure/msal-browser / @azure/msal-react when using source code examples

Tested with
Node: v18.19.1
npm: 10.2.4

Any hints how to make it work?

[BartusZak]

Its funny but I cloned whole repo once again and moved react-router-sample example to separate directory on my desktop and triggered npm i and its working 😠

[danstraughn]

    "@azure/msal-angular": "3.0.4",
    "@azure/msal-browser": "3.1.0",

we are using this version with node `v18.17.1`. i can confirm this is working fine.

Can confirm changing the versions to above works, finally:

Change: package.json ->
"@azure/msal-angular": "3.0.4",
"@azure/msal-browser": "3.1.0",

npm install
npm run build
npm run start

Angular 18 stand alone site is up and functioning.