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.
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.