Next 13中使用@azure/msal-react登录触发TypeError错误求助

可能原因1：@azure/msal-react与@azure/msal-browser版本不匹配 #

msal-react和msal-browser是强耦合依赖，版本必须完全一致，否则会出现内部API调用错误（比如performanceMeasurement.startMeasurement找不到）。

解决步骤： #

1. 打开项目的package.json，检查@azure/msal-react和@azure/msal-browser的版本号，确保两者完全相同。
2. 如果版本不一致，执行安装命令同步版本：

npm install @azure/msal-react@<对应版本> @azure/msal-browser@<对应版本>
# 示例：npm install @azure/msal-react@2.18.0 @azure/msal-browser@2.18.0

3. 删除node_modules和package-lock.json（或yarn.lock），重新安装依赖。

可能原因2：Next.js SSR环境下初始化MSAL实例导致浏览器API缺失 #

Next.js的_app.ts中，组件外部的代码会在服务器端执行，而MSAL依赖的performance API是浏览器环境特有的，服务器端不存在该对象，从而触发错误。

解决步骤： #

修改_app.ts，将MSAL实例的初始化逻辑移到客户端执行（使用useEffect确保只在浏览器端运行）：

import { MsalProvider } from '@azure/msal-react'
import { PublicClientApplication, EventType, SilentRequest, AccountInfo } from '@azure/msal-browser'
import { msalConfig } from '@/services/auth'
import type { AppProps } from 'next/app'
import { useRouter } from 'next/router'
import { CustomNavigationClient } from '@/utils/NavigationClient'
import { useEffect, useState } from 'react'

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const [msalInstance, setMsalInstance] = useState<PublicClientApplication | null>(null);

  useEffect(() => {
    // 仅在客户端初始化MSAL实例
    const instance = new PublicClientApplication(msalConfig);
    
    const accounts = instance.getAllAccounts();
    if (accounts.length > 0) {
      instance.setActiveAccount(accounts[0]);
    }

    instance.addEventCallback((event) => {
      if (event.eventType === EventType.LOGIN_SUCCESS && (event.payload as SilentRequest).account) {
        const account = (event.payload as SilentRequest).account;
        instance.setActiveAccount(account as AccountInfo);
      }
    });

    const navigationClient = new CustomNavigationClient(router);
    instance.setNavigationClient(navigationClient);  

    setMsalInstance(instance);
  }, [router]);

  // 实例未初始化时显示加载状态
  if (!msalInstance) {
    return <div>Loading...</div>;
  }

  return (
    <MsalProvider instance={msalInstance}>
      <Component {...pageProps} />
    </MsalProvider>
  )
}

可能原因3：Index.ts中未正确获取MSAL实例 #

确保在登录组件中通过useMsal hook获取实例，而不是直接引用外部变量：

import { useMsal, UnauthenticatedTemplate } from '@azure/msal-react';

const Index = () => {
  const { instance } = useMsal();

  const initializeSignIn = () => {
    instance.loginRedirect();
  };

  return (
    <>
      <UnauthenticatedTemplate>
        <center>Please sign-in to see your profile information.</center>
        <button onClick={initializeSignIn}>Sign In</button>
      </UnauthenticatedTemplate>
    </>
  )
}

export default Index;

额外排查点：浏览器兼容性或Polyfill缺失 #

如果目标浏览器不支持performance API（比如旧版IE），可以添加polyfill：

1. 安装@ungap/performance-polyfill：

npm install @ungap/performance-polyfill

2. 在_app.ts顶部导入：

import '@ungap/performance-polyfill';

内容的提问来源于stack exchange，提问作者Sadamuhiz