I want to build a react app with vite. “npm run dev” works fine but when I want to build it and open the index.html in the new /dist folder I am coming to an empty /index.html side with no errors in the console. I tried to change the paths but that did not work. It has to be the react-router because everything else works fine. But I don’t know the exact problem and I am not able to finde it out.
I hope you can help me.
PS: Down below you find the relevant code. If you need more information please ask.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/img/djServiceLandLogo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
package.json
{
"homepage": "https://www.enian-gashi.xyz/",
"name": "dj-service-land-production",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@gsap/react": "^2.1.1",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"gsap": "^3.12.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.2.1",
"react-router": "^6.23.1",
"react-router-dom": "^6.23.1"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3",
"vite": "^5.2.0"
}
}
vite.config.js
import { resolve } from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
base: "",
plugins: [react()],
build: {
rollupOptions: {
input: {
main: resolve(__dirname, "index.html"),
},
},
},
});
main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "/src/App.jsx";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
App.jsx
import "./App.css";
import React from "react";
import { Routes, Route } from "react-router-dom";
import Event from "./pages/Event";
import Hochzeit from "./pages/Hochzeit";
import Terminanfrage from "./pages/Terminanfrage";
import AboutMe from "./pages/AboutMe";
import Impressum from "./pages/Impressum";
import Datenschutz from "./pages/Datenschutz";
import MissMatch from "./pages/MissMatch";
function App() {
return (
<>
<Routes>
<Route index path="/" element={<Event />} />
<Route path="Hochzeit" element={<Hochzeit />} />
<Route path="Terminanfrage" element={<Terminanfrage />} />
<Route path="AboutMe" element={<AboutMe />} />
<Route path="Impressum" element={<Impressum />} />
<Route path="Datenschutz" element={<Datenschutz />} />
</Routes>
</>
);
}
export default App;
dist index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./img/djServiceLandLogo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<script type="module" crossorigin src="./assets/main-mOYYtr3v.js"></script>
<link rel="stylesheet" crossorigin href="./assets/main-B4zcMpNs.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
