Hinter einem statischen Build steht kein Server: Was in diesen Dateien falsch ist, ist für jeden Besucher falsch. React2Static prüft all das an deiner eigenen Build-Ausgabe, bevor du live gehst. Hier ist die vollständige Liste, mit der Lösung zu jedem Punkt.
Paketnamen, Pfade und Größen in den Beispielen unten sind nur Beispiele — der Builder setzt dort die Werte aus deinem eigenen Projekt ein.
Was du siehst
dist/
.env
index.html
assets/index-a3f1c2.jsDiese Datei (sie heißt .env) kann deine Passwörter und Schlüssel enthalten, und im Moment kann jeder Besucher sie herunterladen. Behandle alles darin als geleakt — geh zu jedem Dienst und erstelle neue Schlüssel. Bitte dann das KI-Tool, mit dem du dein Projekt erstellt hast, die .env-Datei aus dem „public"-Ordner zu verschieben, damit sie nicht wieder veröffentlicht wird.
Was du siehst
const apiKey = process.env.API_KEY;
fetch(url, { headers: { Authorization: `Bearer ${apiKey}` } });
// Vite turns process.env into {} — the header goes out as
// "Bearer undefined" and the API answers 401. No error in the console.Deine veröffentlichte Website lädt ihre Daten stillschweigend nicht — nichts zeigt einen Fehler, es funktioniert einfach nicht. Füge das in das KI-Tool ein, mit dem du dein Projekt erstellt hast: "A setting read from process.env is empty in the browser, so requests go out without it. Read it through import.meta.env (name starting VITE_), or set it in vite.config." Das sagt ihm, was zu beheben ist.
Die Lösung
const apiKey = import.meta.env.VITE_API_KEY;Was du siehst
Uncaught ReferenceError: process is not defined
at index-a3f1c2.js:1:2043Das ist der übliche Grund, warum eine veröffentlichte Seite völlig leer bleibt. Du musst das nicht von Hand beheben — füge das in das KI-Tool ein, mit dem du dein Projekt erstellt hast: "The app reads settings with process.env, which doesn't work in the browser. Switch to import.meta.env, with names starting VITE_." Das sagt ihm genau, was zu ändern ist.
Die Lösung
const apiKey = import.meta.env.VITE_API_KEY;Was du siehst
const API = "http://localhost:3000/api";Es enthält http://localhost:3000/api. Diese Adresse existiert nur auf dem Rechner, auf dem gebaut wurde — für jeden Besucher schlägt die Anfrage fehl. Zeige stattdessen auf eine öffentliche URL.
Die Lösung
const API = "https://api.example.com";Was du siehst
dist/
assets/index-a3f1c2.js
assets/index-9b2e01.cssEin statischer Hoster liefert index.html als Einstiegsseite aus. Ohne sie sehen Besucher eine Dateiliste oder einen 404. Prüfe, was dein Build tatsächlich schreibt.
Was du siehst
<title>Vite + React + TS</title>Aktuell steht dort „Vite + React + TS“. Genau dieser Text erscheint in Suchergebnissen und geteilten Links. Ändere ihn in index.html.
Die Lösung
<title>Your product name — what it does, in one line</title>Browser-Tab und jedes Suchergebnis verwenden das <title>-Tag. Ergänze es in index.html.
Die Lösung
<title>Your product name — what it does, in one line</title>Suchmaschinen greifen sonst auf ein beliebiges Textfragment zurück. Der eine Satz in <meta name="description"> entscheidet, ob geklickt wird.
Die Lösung
<meta name="description" content="One clear sentence about what this page is for." />Handys rendern die Seite in Desktop-Breite und zoomen heraus — alles wird winzig. Ergänze <meta name="viewport" content="width=device-width, initial-scale=1"> in index.html.
Die Lösung
<meta name="viewport" content="width=device-width, initial-scale=1" />In Messengern und sozialen Netzwerken erscheint dein Link als nackte URL, ohne Titel und ohne Bild. Ergänze og:title, og:description und og:image.
Die Lösung
<meta property="og:title" content="Your product name" />
<meta property="og:description" content="One clear sentence." />
<meta property="og:image" content="https://example.com/og.png" />Was du siehst
<link rel="icon" type="image/svg+xml" href="/vite.svg" />Tab und Lesezeichen zeigen ein leeres Blatt oder das geerbte Vorlagen-Logo. Lege ein eigenes Favicon ab und verlinke es in index.html.
Die Lösung
<link rel="icon" href="/favicon.ico" sizes="any" />Screenreader wählen danach die Aussprache, Browser bieten danach eine Übersetzung an. Ergänze lang="de" oder die tatsächliche Sprache der Seite.
Die Lösung
<html lang="en">Indexiert wird die Seite auch so, aber in der robots.txt verweist du Crawler auf deine Sitemap. Wir können sie im Schritt „Live gehen“ ergänzen.
Die Lösung
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xmlWas du siehst
dist/assets/index-a3f1c2.js 2,418.55 kB │ gzip: 731.20 kB
(!) Some chunks are larger than 500 kB after minification.Über Mobilfunk sind das Sekunden weißer Bildschirm, bevor überhaupt etwas erscheint. Die schweren Teile per dynamischem import() abzutrennen verkürzt den ersten Ladevorgang meist deutlich.
Die Lösung
const Editor = lazy(() => import('./Editor'));Was du siehst
dist/assets/hero-8f2a1b.png 4,102.11 kBGroße Bilder und Schriften verzögern die erste Darstellung. Bilder nach WebP zu konvertieren und auf die tatsächlich angezeigte Größe zu skalieren nimmt den Großteil des Gewichts.
Leg deine ZIP in den Builder. Er führt den echten Build in deinem Browser aus, und wenn etwas kaputtgeht, zeigt er auf die entscheidende Zeile, statt dir das ganze Log zu reichen.
Builder öffnen