Why am I getting an error after using Auth0 in Next.js?

Question

I was using this tutorial, and after doing all 5 steps, I ran the server and I saw this error:

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 file:

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

export default handleAuth();

_app.js file:

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 file:

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

I was not getting this error, but when I applied those changes, I got that error.

Why am I getting this error?

Answer 1

The quickstart in the official website says we have to import UserProvider using this:

import { UserProvider } from '@auth0/nextjs-auth0/client';

So I tried that and it worked.