I have a next.js projekt that works perfectly in the development mode. But wenn i want to deploy it to vercel i get the Errors: “Compiler server unexpectedly exited with code: null and signal: SIGKILL
” and “ReferenceError: location is not defined”.
Vercel Deploy Console
"use client";
import { useAuthState } from "react-firebase-hooks/auth";
import { useEffect, useState } from "react";
import React from "react";
import { auth } from "@/app/firebase/config";
import { useRouter } from "next/navigation";
import { signOut } from "firebase/auth";
import updateGitHubRepository from "@/app/api/updateRepo.mjs";
import updateImage from "./api/updateImage.mjs";
import { ToastContainer, toast, Bounce } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
export default function Home() {
const [user] = useAuthState(auth);
const [userSession, setUserSession] = useState(null);
const [displayName, setDisplayName] = useState("");
const [role, setRole] = useState("");
const [bioDE, setBioDE] = useState("");
const [bioEN, setBioEN] = useState("");
const [avatar, setAvatar] = useState("");
const [index, setIndex] = useState("");
const [file, setFile] = useState("");
const router = useRouter(); // Move the useRouter hook inside useEffect
// Load user session from sessionStorage when component mounts
useEffect(() => {
const sessionUser = sessionStorage.getItem("user");
setUserSession(sessionUser);
}, []);
// Load GitHub file when user.displayName changes
useEffect(() => {
const loadGitHubFile = async () => {
const fileUrl =
"RAW MEMBER JSON FILE";
try {
const response = await fetch(fileUrl);
if (!response.ok) {
throw new Error(
`Fehler beim Abrufen der Datei. Status: ${response.status}`
);
}
const fileContent = await response.json();
const members = fileContent.members;
const index = members.findIndex((item) => item.id === user.index);
const gitDisplayName = members[index].name;
const gitRole = members[index].description;
const gitBioDE = members[index].biographie.de;
const gitBioEN = members[index].biographie.en;
const gitImg = members[index].img;
if (index !== -1) {
setDisplayName(gitDisplayName || "");
setRole(gitRole || "");
setBioDE(gitBioDE || "");
setBioEN(gitBioEN || "");
setIndex(index || "");
const inputPath = gitImg;
const baseUrl = "https://www.DOMAIN.de/";
// Verwenden Sie die URL-Klasse, um den vollständigen Pfad zu erstellen
const fullPath = inputPath.replace("../", baseUrl);
setAvatar(fullPath);
}
return { gitDisplayName, gitRole, gitBioDE, gitBioEN, gitImg, index };
} catch (error) {
console.error(
"Fehler beim Laden der Datei von der URL:",
error.message
);
}
};
if (user && user.displayName) {
loadGitHubFile();
}
}, [user, router]); // Include router as a dependency
const handleFileUpload = async (event) => {
const file = event.target.files[0];
console.log(file);
const url = URL.createObjectURL(file);
setAvatar(url);
setFile(file);
// Hier können Sie den Dateiupload-Code hinzufügen
};
const handleUploadtoGithub = async (index, fields, img) => {
// Hier können Sie den Dateiupload-Code hinzufügen
try {
let link = avatar;
if (file) {
const uploadFile = file;
const newFileNameWithoutExtension = "avatar";
const extension = uploadFile.type.split("/")[1];
const newFileName = `${newFileNameWithoutExtension}.${extension}`;
const newFile = new File([uploadFile], newFileName, {
type: uploadFile.type,
});
link = await updateImage(newFile);
console.log(link);
}
const build = {
id: index + 1,
name: fields.name,
description: fields.role,
img: link || "",
biographie: {
de: fields.biographie.de,
en: fields.biographie.en,
},
};
await updateGitHubRepository(
"USERNAME",
"REPOSITORY",
"BRANCH",
"FILE",
`members.${index}`,
build,
process.env.NEXT_PUBLIC_GITHUB_API_KEY
);
toast.success("Erfolgreich Hochgeladen!");
} catch (error) {
toast.error("Fehler beim Hochladen!");
console.error("Fehler beim Laden der Datei von der URL:", error.message);
}
};
return (
//HTML
);
}
I tried serveral methods to solve the problem but nothing worked out.