search

AzureAD / microsoft-authentication-library-for-js

Microsoft Authentication Library (MSAL) for JS
http://aka.ms/aadv2
MIT License
3.64k stars 2.65k forks source link

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

Closed hansakaRightS closed 1 year ago

hansakaRightS commented 1 year ago

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 commented 1 year ago

same here! is there already a workaround?

michaelmairegger commented 1 year ago

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

hansakaRightS commented 1 year ago 
    "@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 commented 1 year ago

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

greut commented 1 year ago

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 commented 1 year ago

any permanent solution for this?

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

rpastortntt commented 1 year ago

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 commented 1 year ago

Wow, they really shit the bed.. see also https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/5410

Core121 commented 1 year ago

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

jo-arroyo commented 1 year ago

@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 commented 1 year ago

Getting same error, but only for msal-angular 3.0.0

hansakaRightS commented 1 year ago

also mentioned here #6323

achrysanthakopoulou commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

achrysanthakopoulou commented 1 year ago

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 commented 1 year ago

Using 3.0.2 and Azure B2C works on my projects

sandrooco commented 1 year ago

@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 commented 1 year ago

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. image

hansakaRightS commented 1 year ago 

    "@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 commented 10 months ago

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 commented 7 months ago

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",
image
jorgeoca commented 7 months ago

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",
image

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 commented 5 months ago

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 https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/6310#issuecomment-1953876010
  2. Can't resolve @azure/msal-browser / @azure/msal-react when using source code examples

image image

Tested with Node: v18.19.1 npm: 10.2.4

Any hints how to make it work?

BartusZak commented 5 months ago

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 😠

image

danstraughn commented 1 month ago 
    "@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.