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?
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.