I have encountered an issue in my Vue.js project with TypeScript. I defined a constant named serverUrl in one file for HTTP declarations, and then imported it into another file where the AuthService class is defined. Strangely, this constant appears as UNDEFINED when accessed in either the property declaration or constructor of AuthService. However, it works fine within the login() function. What could be causing this problem? Below are snippets from my files:
import axios, { AxiosError, AxiosRequestConfig } from 'axios';
export const serverUrl = 'http://localhost:63523'; // Definition of serverUrl Constant
export const http = axios.create({ timeout: 20000, headers: {
'Content-Type': 'application/json',
'Accept': 'application/json' } });
And here is the AuthService file:
import { http, serverUrl } from '@/services/http';
export class AuthService {
private authUrl: string = serverUrl + '/' + 'auth/login'; // Issue with serverUrl being UNDEFINED
constructor() {
this.authUrl = `${serverUrl}/auth/login`; // Issue with serverUrl being UNDEFINED
}
public login(login: string, password: string ) {
const authUrl2: string = serverUrl + '/' + 'auth/login'; // serverUrl displayed correctly here
return http.post(authUrl2, {login, password});
}
}
export const authService = new AuthService();