MSAL library breaking sharepoint webpart code

Question

I have added @azure/msal-browser to my sharepoint webpart

import { WebPartContext } from "@microsoft/sp-webpart-base";
import { ITokenIssuer } from "../../interfaces/tokenIssuer/ITokenIssuer";
import { PublicClientApplication } from '@azure/msal-browser'
class MSALTokenIssuer implements ITokenIssuer {
    constructor() {

    }
    async getAccessToken(context: WebPartContext): Promise<string> {
        const msalConfig = {
            auth: {
                clientId: 'id',
                authority: 'tenant',
                redirectUri: context.pageContext.web.absoluteUrl
            }
        }
        console.log(msalConfig);
        console.log(PublicClientApplication);
    
        return "";
    }
}

export default new MSALTokenIssuer();

The app is breaking after doing a gulp serve. It breaks after importing the msal library

sp-webpart-workbench-assembly_en-us_6051f5498d679584d691e3a7c35fd7c3.js:199 Could not load real-client-web-app-web-part in require. Error: Module parse failed: Unexpected token (59:58) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders