在Next.js中使用Auth0后出现元素类型无效错误的原因？

问题背景 #

完成某教程5步操作后，启动服务器时出现以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

相关文件代码 #

[...auth0].js 文件 #

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

_app.js 文件 #

import Layout from '../components/layout';
import { useState, createContext, useEffect } from 'react';
import AppContext from '../components/AppContext';
import '../styles/globals.css';

import { SessionProvider } from 'next-auth/react';
import { UserProvider } from '@auth0/nextjs-auth0';

function MyApp({ Component, pageProps }) {
  return (
    <UserProvider>
      <div>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </div>
    </UserProvider>
  );
}
export default MyApp;

.env.local 文件 #

AUTH0_SECRET="valid"
AUTH0_BASE_URL="http://localhost:3000"
AUTH0_ISSUER_BASE_URL="valid"
AUTH0_CLIENT_ID="https://valid"
AUTH0_CLIENT_SECRET="valid"

此前无该错误，完成上述改动后出现问题，需排查错误原因。

错误原因及修复方案 #

1. 核心错误：UserProvider 已被移除 #

在 @auth0/nextjs-auth0 v2版本中，UserProvider 已经被废弃，替换为 AppProvider。你当前导入的 UserProvider 是undefined，这直接触发了组件类型无效的报错。

修复操作：
修改 _app.js 中的导入和组件使用：

// 替换原UserProvider导入
import { AppProvider } from '@auth0/nextjs-auth0';

function MyApp({ Component, pageProps }) {
  return (
    <AppProvider>
      <div>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </div>
    </AppProvider>
  );
}

2. 环境变量配置错误 #

AUTH0_CLIENT_ID 的值格式完全错误，它应该是Auth0控制台生成的纯字符串ID，而非以https://开头的URL。

修复操作：
登录Auth0控制台，找到对应应用的Client ID，替换 .env.local 中该字段的值。

3. 冗余导入造成混淆 #

你导入了 next-auth/react 的 SessionProvider，但实际使用的是Auth0的集成方案，这个导入完全多余，建议移除。

修复操作：
删除 _app.js 中的 import { SessionProvider } from 'next-auth/react'; 语句。

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