Custom Component - Can't import the named export from non EcmaScript module

[Kishore Pechett]

Hi All,

We have installed the "@azure/msal-browser" package within the ServiceNow custom component and tried to run it locally, but it is throwing the below error. We want use the SilentToken method in the package to grab the SSO token. Can someone please help guide us in resolving this error?

We are using ServiceNow cli and ui-component extention to build the custom component.
{
"extensions": {
"ui-component": "24.0.0"
},
"snc": "1.1.0"
}
Node version : v12.16.1
NPM: '6.13.4'

Command used to install the package : npm install @Azure/msal-browser
importing the package as : import { useMsal } from "@azure/msal-browser";

command using to run app locally : snc ui-component develop --entry ./element.js --open true --port 3001

Error we are seeing:

ERROR in ../node_modules/@azure/msal-browser/dist/operatingcontext/StandardOperatingContext.mjs 9:39-59
Can't import the named export 'BaseOperatingContext' from non EcmaScript module (only default export is available)
@ ../node_modules/@azure/msal-browser/dist/app/PublicClientApplication.mjs
@ ../node_modules/@azure/msal-browser/dist/index.mjs
@ ../src/x-mioms-m365-devicediagnostics/deviceDiagnosticsComponent.js
@ ../src/x-mioms-m365-devicediagnostics/index.js
@ ./element.js
@ multi ../node_modules/error-overlay-webpack-plugin/lib/entry-basic.js ../node_modules/error-overlay-webpack-plugin/lib/entry-devserver.js? ../node_modules/@servicenow/cli-component-archetype-dev/node_modules/webpack-dev-server/client?http://localhost:3001 ../node_modules/webpack/hot/dev-server.js ./element.js

ERROR in ../node_modules/@azure/msal-browser/dist/operatingcontext/UnknownOperatingContext.mjs 9:38-58
Can't import the named export 'BaseOperatingContext' from non EcmaScript module (only default export is available)
@ ../node_modules/@azure/msal-browser/dist/app/PublicClientNext.mjs
@ ../node_modules/@azure/msal-browser/dist/index.mjs
@ ../src/x-mioms-m365-devicediagnostics/deviceDiagnosticsComponent.js
@ ../src/x-mioms-m365-devicediagnostics/index.js
@ ./element.js

.......................................... 
@ multi ../node_modules/error-overlay-webpack-plugin/lib/entry-basic.js ../node_modules/error-overlay-webpack-plugin/lib/entry-devserver.js? ../node_modules/@servicenow/cli-component-archetype-dev/node_modules/webpack-dev-server/client?http://localhost:3001 ../node_modules/webpack/hot/dev-server.js ./element.js
i ｢wdm｣: Failed to compile.
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'