¿Alguien puede explicar por qué recibo este error en el siguiente js? El archivo auth.js tampoco se ejecuta, pero solía ejecutarse antes cuando importo.

ReferenceError: No se puede acceder a 'AuthProvider' antes de la inicialización Este error ocurrió mientras se generaba la página. Todos los registros de la consola se mostrarán en la ventana del terminal.

Este es mi archivo _app.js

 import React from "react"; import { AuthProvider } from "contexts/auth"; import { ProtectRoute } from "contexts/auth"; import Nav from "components/Nav"; function MyApp({ Component, pageProps }) { return ( <AuthProvider> <Nav /> <ProtectRoute> <Component {...pageProps} /> </ProtectRoute> </AuthProvider> ); } export default MyApp;

Y este es mi archivo contexts/auth.js

 import React, { createContext, useState, useContext, useEffect } from "react"; import Cookies from "js-cookie"; import { fetchWrapper } from "helpers"; const AuthContext = createContext({}); export const AuthProvider = ({ children }) => { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const loadUserFromCookies = async () => { // authenticate code }; loadUserFromCookies(); }, []); const login = async (email, password) => { // login code }; const logout = () => { // logout code }; return ( <AuthContext.Provider value={{ isAuthenticated: !!user, user, login, loading, logout }} > {children} </AuthContext.Provider> ); }; export const useAuth = () => useContext(AuthContext); export const ProtectRoute = ({ children }) => { const { isAuthenticated, isLoading } = useAuth(); if ( isLoading || (!isAuthenticated && window.location.pathname !== "/login") ) { return () => { "Loading..."; }; } return children; };