Website-Suche

typescript - Relative Importe in einer mit nx erstellten Next-App unter Verwendung von VS Code

Ich habe ein Problem mit einem Next.js-Projekt, das mit nx und VS Code aufgesetzt wurde:

Wenn ich versuche, eine Komponente mit VS Code automatisch zu importieren, wird ein absoluter Import erzeugt, der sofort die @nrwl/nx/enforce-module-boundaries eslint-Regel auslöst, wodurch die aktuelle Datei ungültig wird.

Zum Beispiel mit Ordnerstruktur:

apps/my-app/
  pages/
    entity/
      new/
        index.tsx
  components/
    Loading.tsx

Der generierte Import wird sein:

// in my-app/pages/entity/new/index.tsx
import Loading from 'apps/my-app/components/Loading'

Während ich erwarte:

import Loading from '../../../components/Loading'

VS Code hat eine Einstellung, um immer relative Pfade für Importe zu verwenden, aber das wird mich daran hindern, Bibliotheken auf die richtige Weise zu importieren (@scope/lib).

Gibt es eine mögliche Konfiguration, die automatische Importe wie erwartet funktionieren lässt?

Antwort #1

Sie können die paths-Eigenschaft in der tsconfig.base.json-Datei im Stammverzeichnis Ihres Projekts konfigurieren. Wenn Sie sie zu anderen tsconfig-Dateien hinzufügen, funktioniert es nicht, die richtige Datei ist die tsconfig.base.json-Datei im Stammverzeichnis Ihres Projekts.

Ausgehend von deinem Beispiel kannst du Folgendes zur paths-Option hinzufügen.

"@my-app/*": ["apps/my-app/*"]

Jetzt können Sie ../../../components/Loading zu @my-app/components/Loading ändern.

Detaillierteres Beispiel (Hinweis: Ich habe eine Reihe der anderen Optionen, die in Ihrer tsconfig.base.json-Datei sein sollten, aus Gründen der Lesbarkeit gelöscht)

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@my-app/*": [
                "apps/my-app/*"
            ]
        }
}

Quelle und weitere Informationen im offiziellen TS-Handbuch: https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Antwort #2

Für diejenigen, die hierher kommen, ohne dass dies gelöst wird. (Verwendung von nx Monorepo)

Fehlerbehebung bei den 2 Fehlern (TS-Fehler und Lint-Fehler):

Zuerst der Alias-Fehler: Modul '@account/components/something' oder dessen entsprechende Typdeklarationen können nicht gefunden werden.

  1. Fügen Sie in Ihrer Basis-tsconfig.base.json (nicht in tsconfig.json unter Ihren Apps, da diese überschrieben wird) Folgendes hinzu:
 "compilerOptions":{
       ...
       baseUrl:"." // Try "src" as well incase of boiler plates or if your resolved path (on the error) is missing an src.
       path: {
       "@account/*": ["app/*"],
       "@account/components/*": ["app/components/*"] 
     }
   },

Das Obige wird sich auflösen:

import { authMiddleware } from '@account/components/something';

von

import { authMiddleware } from '../../../components/something';

Für Lint-Fehler: Projekte sollten relative Importe verwenden, um aus anderen Dateien innerhalb desselben Projekts zu importieren - eslint-Regel @nrwl/nx/enforce-module-boundaries schlägt fehl

  1. Fügen Sie "allowCircularSelfDependency": true hinzu.
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "allowCircularSelfDependency": true, -> This may solve the lint error.
            "allow": ["@account/**"], -> // White list the lint error.
             ...
          }
  1. Whitelist die Ordner: Füge "erlauben": [@foldername] hinzu
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            
            "allow": ["@account/**"], -> // White list the lint error.
             ...
           }

Das sollte es beheben.

Verwandte Artikel