# React: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

## Error explanation
Tells us that some of components or classes are not correctly imported.

For example

import { ... } from "next-auth/client"

#This importing may be failed

## Background
I was creating a blog site with Django+Next.js with Google Authentication watching an Tutorial video on Youtube.

After I coded [...nextauth].js, _app.js, and navigation.js files, I got the title's error.

I carefully read and compared my codes with the official doc's Getting Started, I realized that the tutorial vides was used Next-auth v3, while I have installed and tried to code using v4.

## Some codes that have changed between v3 and v4

#### pages/index.js and _app.js
v3:

import ... from "next-auth/client"

v4:

import ... from "next-auth/react"

#### ClientAPI > useSession()
v3:

import { useSession } from "next-auth/client"

export default function Component() {
  const [session, loading] = useSession()
  ....

v4:

import { useSession } from "next-auth/react"

export default function Component() {
  const { data: session, status } = useSession()
  ...

## References
#### NextAuth.js
https://next-auth.js.org/getting-started/client
#### 株式会社シーポイントラボ
https://cpoint-lab.co.jp/article/202005/15172/

#### stack overflow
https://stackoverflow.com/questions/71454705/element-type-is-invalid-expected-a-string-for-built-in-components-or-a-class