Cannot access API before initialization
Unanswered
American Chinchilla posted this in #help-forum
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:
Here’s a simplified version of my setup:
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
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",
})
);