TypeScript imported constant is undefined

Question

In my Vue.ts (Vue.js with TypeScript) I have defined a constant serverUrl in one file (http declaration) and I'm importing it into the other file with class AuthService. But this constant is UNDEFINED in either property declaration or constructor of AuthService. In the login() function it's OK. What's the problem? Here are my files. http:

import axios, { AxiosError, AxiosRequestConfig } from 'axios';

export const serverUrl = 'http://localhost:63523';       // serverUrl Constant

export const http = axios.create({   timeout: 20000,   headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'   } });

And the AuthService:

import { http, serverUrl } from '@/services/http';

export class AuthService {

  private authUrl: string = serverUrl + '/' + 'auth/login';    // serverUrl = UNDEFINED

  constructor() {
    this.authUrl = `${serverUrl}/auth/login`;                   // serverUrl = UNDEFINED
  }

  public login(login: string, password: string ) {
    const authUrl2: string = serverUrl + '/' + 'auth/login';   // serverUrl = OK!
    return http.post(authUrl2, {login, password});
  }
}

export const authService = new AuthService();

Answer 1

As discussed in the comments the variable serverUrl was not correctly injected in the file AuthService because there was a circular dependency between theses two files (not visible from the code provided in the question).

The solution is to remove the circular dependency between theses two files and the variable serverUrl will be correctly imported.