TypeScript importerat konstant är odefinierad

I min Vue.ts (Vue.js med TypeScript) har jag definierat en konstant serverUrl i en fil (http-deklaration) och jag importerar den till den andra filen med klassen AuthService. Men denna konstant är ODEFINIERAD i antingen egendomsdeklaration eller i konstruktionen av AuthService. I login()-funktionen är det okej. Vad är problemet? Här är mina filer. 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'   } });

Och 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();

Svar #1

Som diskuterats i kommentarerna injicerades inte variabeln serverUrl korrekt i filen AuthService eftersom det fanns ett cirkulärt beroende mellan dessa två filer (inte synligt från den kod som tillhandahölls i frågan).

Lösningen är att ta bort det cirkulära beroendet mellan dessa två filer och variabeln serverUrl kommer att importeras korrekt.

Svar #2

Jag hade ett helt annat problem. Jag hade inga cirkulära importer/beroenden alls.

I mitt fall importerade jag (i MODULE A) en barrel index.ts-fil (från MODULE B) med redan förkompilerad kod (i dist-mappen) och package.json som pekade på den, vilket dolde den verkliga och färska index.ts.

Lösningen var förstås att ta bort den byggda dist-mappen där TypeScript-kompilatorn importerade index.ts korrekt efteråt.

Här är koden:

MODUL A

kod :

import { TAG_PROPERTY_NAME, IFormActivity } from "@colabo-flow/i-core";

// `undefined` as we were importing old `dist/index.js` file without `TAG_PROPERTY_NAME` exported, instead of the new `index/ts` file with `TAG_PROPERTY_NAME` exported
console.warn(`TAG_PROPERTY_NAME: ${TAG_PROPERTY_NAME}`);

tsconfig.json:

{
    "compilerOptions": {
        "paths": {
            "@colabo-flow/i-core": [
                "<REST_OF_THE_PATH>/puzzles/flow/core",
            ],
            // ...
        },
        // ...
    },
    // ...
}

MODUL B

package.json:

{
    "main": "dist/index.js",
    "module": "dist/index.js",
    // ...
}

index.ts:

export const TAG_PROPERTY_NAME = "tags";
// ...

Relaterade artiklar