元素类型无效：检查提供者的渲染方法（React Native）

Question

im working for a school project with react to create an app. But currently im facing a problem with this error. I cant tell you why this is happening. Its a part for a Firebase Auth Login.

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

Check the render method of Providers .

×

App.js

import React from 'react';
import { render } from 'react-dom';
import Providers from './navigation';
 
const App = () => {
  return(
    <Providers />

  )
}
 
export default App;

Here is the Provider Function

import React from 'react';
import AuthProvider from './AuthProvider';
import Routes from './Routes';

const Providers = () => {
  return (
    <AuthProvider>
      <Routes />
    </AuthProvider>
  );
}

export default Providers;

This is my AuthProvider

import React, {createContext, useState} from 'react';
import auth from '@react-native-firebase/auth';

export const AuthContext = createContext();

export const AuthProvider = ({children}) => {
    const [user, setUser] = useState(null);
  
    return (
      <AuthContext.Provider
        value={{
          user,
          setUser,
          login: async (email, password) => {
            try {
              await auth().signInWithEmailAndPassword(email, password);
            } catch (e) {
              console.log(e);
            }
          },
          register: async (email, password) => {
            try {
              await auth().createUserWithEmailAndPassword(email, password);
            } catch (e) {
              console.log(e);
            }
          },
          logout: async () => {
            try {
              await auth().signOut();
            } catch (e) {
              console.log(e);
            }
          },
        }}>
        {children}
      </AuthContext.Provider>
    );

    
  };

Answer 1

You are exporting AuthProvider as a named export

try like this import {AuthProvider} from './AuthProvider';