Next.js Discord

Discord Forum

Cannot access API before initialization

Unanswered
American Chinchilla posted this in #help-forum
Open in Discord
Avatar
American ChinchillaOP
Hi everyone,

I'm encountering a persistent issue with Next.js, Zustand, and class-based API management. The error I'm receiving is:
Uncaught (in promise) ReferenceError: Cannot access 'Api' before initialization
    at Module.default (api.js:3:48)
    at eval (auth.js:3:38)
    at (:3000/app-pages-browser)/api/auth.js (http://localhost:3000/_next/static/chunks/app/layout.js:772:1)
    at options.factory (webpack.js?v=1725709300029:715:31)
    at __webpack_require__ (webpack.js?v=1725709300029:37:33)

Here’s a simplified version of my setup:
frontend/api/api.js

import { useAuthStore } from "../stores/useAuthStore.js";

export default class Api {
  static baseUrl = process.env.NEXT_PUBLIC_BASE_URL;

  static getHeaders(options = undefined) {
    const _token = useAuthStore.getState().token;
    let headers = {
      "Authorization": _token ? `Bearer ${_token.token.token}` : '',
    };

    if (options) {
      headers = { ...headers, ...options };
    } else {
      headers['Content-Type'] = 'application/json';
      headers['Accept'] = 'application/json';
    }

    return headers;
  }
}

1 Reply

Avatar
American ChinchillaOP
frontend/stores/useAuthStore.js

import { create } from 'zustand';
import { persist } from "zustand/middleware";
import AuthApi from "#api/auth.js";

export const useAuthStore = create(
    persist((set, get) => ({
        token: null,
        user: null,

        setUser: (user) => set({ user }),

        login: async (credentials) => {
            try {
                const data = await AuthApi.login(credentials);
                if (data) {
                    console.log('Token reçu:', data);
                    set({ token: data });
                    const currentUser = await AuthApi.getCurrentUser();
                    set({ user: currentUser });
                } else {
                    console.error('Erreur : token manquant dans la réponse de login');
                }
            } catch (error) {
                console.error('Erreur lors de la connexion:', error);
            }
        },

        logout: () => set({ token: null, user: null }),

        refreshToken: async () => {
            try {
                const data = await AuthApi.refreshToken();
                if (data && data.token) {
                    set({ token: data.token });
                }
            } catch (error) {
                console.error('Erreur lors du rafraîchissement du token:', error);
            }
        },

        isLoggedIn: () => !!get().token
    }), {
        name: "authToken",  
    })
);