Wie nutzt man Typescript paths-aliases in astro.config.ts

Astro fehlt ein wichiges vite-plugin für Typescript. Ich zeige dir, wie man das plugin korrekt hinzufügt.

Wenn sie, paths-aliases der tsconfig.json benutzen wollen

{
	"compilerOptions": {
		"paths": {
			"@helper": ["src/shared/helper.ts"]
		}
	}
}

und diese innerhalb der astro.config.ts benutzen, dann erhalten sie diese Fehler:

[vite] Pre-transform error: Failed to load url @helper (resolved id: @helper) in {path}/astro.config.ts. Does the file exist?

Cannot find module '@helper' imported from '{path}/astro.config.ts'

Wie man in diesem Pull-Request von Astro sehen kann, ist es ein bekannter Bug, welcher nicht behoben wird. Also müssen sie diesen selbst beheben.

Zum lösen des Fehlers, ganz einfach diese Schritte befolgen:

patch-package einrichten
Die Datei `node_modules/astro/dist/core/config/vite-load.js` öffnen

2 zusätzliche Importe hinzufügen

import configAliasVitePlugin from '../../vite-plugin-config-alias/index.js';
import { loadTSConfig } from './tsconfig.js';

Die tsconfig innerhalb der `createViteServer`-Funktion laden
```
const tsConfig = await loadTSConfig(root);
```
und `configAliasVitePlugin` innerhalb des `plugins`-array hinzufügen
```
configAliasVitePlugin({ settings: tsConfig })
```
Um die Änderung dauerhaft zu machen, müssen sie noch `patch-package` verwenden
```
npx patch-package astro
```

Danach gibt es eine Datei unter `patches/astro+{version}.patch` mit folgendem Inhalt:

diff --git a/node_modules/astro/dist/core/config/vite-load.js b/node_modules/astro/dist/core/config/vite-load.js
index 949a541..ec8b7a7 100644
--- a/node_modules/astro/dist/core/config/vite-load.js
+++ b/node_modules/astro/dist/core/config/vite-load.js
@@ -1,8 +1,11 @@
 import { pathToFileURL } from "node:url";
 import { createServer } from "vite";
+import configAliasVitePlugin from '../../vite-plugin-config-alias/index.js';
 import loadFallbackPlugin from "../../vite-plugin-load-fallback/index.js";
 import { debug } from "../logger/core.js";
+import { loadTSConfig } from './tsconfig.js';
 async function createViteServer(root, fs) {
+  const tsConfig = await loadTSConfig(root);
   const viteServer = await createServer({
     configFile: false,
     server: { middlewareMode: true, hmr: false, watch: null, ws: false },
@@ -23,7 +26,12 @@ async function createViteServer(root, fs) {
         "@astrojs/db"
       ]
     },
-    plugins: [loadFallbackPlugin({ fs, root: pathToFileURL(root) })]
+    plugins: [
+      configAliasVitePlugin({
+        settings: { tsConfig: tsConfig.tsconfig, tsConfigPath: tsConfig.tsconfigFile },
+      }),
+      loadFallbackPlugin({ fs, root: pathToFileURL(root) }),
+    ]
   });
   return viteServer;
 }

Starten sie nun Astro neu und es sollte funktionieren.