I am trying to deploy my website on Vercel but I am facing this error at the build time. This error occurs during preredering of the page: error image
ReferenceError: document is not defined
at createTag (/vercel/path0/.next/server/chunks/9869.js:151:25622)
at /vercel/path0/.next/server/chunks/9869.js:151:38510
at /vercel/path0/.next/server/chunks/9869.js:151:38633
at /vercel/path0/.next/server/chunks/9869.js:151:41458
at /vercel/path0/.next/server/chunks/9869.js:151:25287
at 60496 (/vercel/path0/.next/server/chunks/9869.js:151:25291)
at t (/vercel/path0/.next/server/webpack-runtime.js:1:143)
at 88924 (/vercel/path0/.next/server/chunks/9869.js:152:58908)
at t (/vercel/path0/.next/server/webpack-runtime.js:1:143)
at 85912 (/vercel/path0/.next/server/chunks/5708.js:34:11987)
Generating static pages (13/18)
ReferenceError: document is not defined
at createTag (/vercel/path0/.next/server/chunks/9869.js:151:25622)
at /vercel/path0/.next/server/chunks/9869.js:151:38510
at /vercel/path0/.next/server/chunks/9869.js:151:38633
at /vercel/path0/.next/server/chunks/9869.js:151:41458
at /vercel/path0/.next/server/chunks/9869.js:151:25287
at 60496 (/vercel/path0/.next/server/chunks/9869.js:151:25291)
at t (/vercel/path0/.next/server/webpack-runtime.js:1:143)
at 88924 (/vercel/path0/.next/server/chunks/9869.js:152:58908)
at t (/vercel/path0/.next/server/webpack-runtime.js:1:143)
at 85912 (/vercel/path0/.next/server/chunks/5708.js:34:11987) {
digest: '2326889752'
}
I have this error in all these files: files where i have the same error
Export encountered errors on following paths:
/Contact/page: /Contact
/_not-found/page: /_not-found
/admin/UnasssignedByWorker/page: /admin/UnasssignedByWorker
/admin/reports/page: /admin/reports
/admin/verify_worker/page: /admin/verify_worker
/login/page: /login
/page: /
/register/page: /register
/user/User_Profile/page: /user/User_Profile
/user/create_request/page: /user/create_request
/user/hire/page: /user/hire
/user/view_request/page: /user/view_request
/worker/all_request/page: /worker/all_request
/worker/hire/page: /worker/hire
/worker/requests/page: /worker/requests
Can anyone please tell me what is this error stating and how to resolve it? This error is different from Next.js: document is not defined because I have not used the term document in any of the files in which I have this error I am using NextJS version 14.2.8 also I am using the app directory
code( this is one of the file in which I have this error ):
"use client";
import React, { useState } from "react";
import { FaGithub, FaEnvelope, FaLinkedin } from "react-icons/fa";
import { toast, Toaster } from "react-hot-toast";
import Image from "next/image";
import Footer from "../_components/Footer";
const ContactForm = () => {
const [Name, SetName] = useState("");
const [Email, SetEmail] = useState("");
const [Message, SetMessage] = useState("");
const [loading, Setloading] = useState(false);
async function handleSubmit(e) {
e.preventDefault();
try {
Setloading(true);
const response = await fetch(
";,
{
method: "POST",
headers: {
"Content-type": "application/json",
},
body: JSON.stringify({ Name, Email, Message }),
}
);
if (response.status === 200) {
toast.success("We received your query");
SetName("");
SetEmail("");
SetMessage("");
} else {
toast.error("Please try after some time");
}
} catch (error) {
toast.error("Something went wrong");
} finally {
Setloading(false);
}
}
return (
<div className="w-full max-w-md">
{" "}
<h1 className="text-4xl font-bold text-gray-800 mt-8 text-center">
Get in Touch
</h1>
<p className="text-gray-600 text-lg mb-6 text-center">
We are here for you. How can we help?
</p>
<form onSubmit={handleSubmit} className=" rounded-lg p-6 w-full max-w-md">
<div className="mb-4">
<label htmlFor="name" className="block text-gray-700 font-medium">
Name
</label>
<input
type="text"
className="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
id="name"
required
placeholder="Enter your name"
value={Name}
onChange={(e) => SetName(e.target.value)}
/>
</div>
<div className="mb-4">
<label htmlFor="email" className="block text-gray-700 font-medium">
Email
</label>
<input
type="email"
className="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
id="email"
required
placeholder="Enter your email"
value={Email}
onChange={(e) => SetEmail(e.target.value)}
/>
</div>
<div className="mb-4">
<label htmlFor="message" className="block text-gray-700 font-medium">
Message
</label>
<textarea
className="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none "
id="message"
rows="4"
required
placeholder="Go ahead! We are listening..."
value={Message}
onChange={(e) => SetMessage(e.target.value)}
></textarea>
</div>
<button
type="submit"
className="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg"
disabled={loading}
>
{loading ? "Sending..." : "Submit"}
</button>
</form>
</div>
);
};
const Contact = () => {
return (
<>
<div className="flex flex-col items-center w-full px-4 mt-8">
<Toaster />
<div className="flex flex-wrap justify-center gap-8 sm:w-3/4 p-3 bg-white shadow-lg mt-3">
<ContactForm />
<div className="flex flex-col p-3 rounded-lg">
<Image
src="/contacus.jpg"
className="w-80 rounded-lg shadow-lg"
alt="Contact Us"
width={400}
height={200}
/>
<p className="text-xl font-semibold mt-4 mb-2 text-center">
Contact us
</p>
<div className="flex flex-col gap-2">
<a
href="mailto:[email protected]"
className=" text-lg flex items-center mt-2"
>
<FaEnvelope className="text-xl mr-2" /> [email protected]
</a>
<a
href="mailto:[email protected]"
className=" text-lg flex items-center mt-2"
>
<FaEnvelope className="text-xl mr-2" />{" "}
[email protected]
</a>
<div className=" text-lg flex items-center mt-2">
<a
href=";
target="blank"
className="flex"
>
<FaLinkedin className="text-2xl mr-2" /> Ayush Sharma
</a>
</div>
</div>
</div>
</div>
{/* developed by */}
<p className="text-2xl font-bold text-gray-800 mt-10">Developed By</p>
<div className="flex flex-col items-center mt-4">
<Image
src="/Ayush2.jpg"
alt="Ayush Sharma"
className="w-32 h-32 rounded-full object-cover shadow-lg mb-4"
width={200}
height={200}
/>
<p className="text-lg font-semibold">Ayush Sharma</p>
<p className="text-gray-600">Developer and Project Manager</p>
<div className="flex mt-4 space-x-4">
<a
href=";
target="_blank"
className="bg-gray-800 text-white p-3 rounded-full"
>
<FaGithub className="text-2xl" />
</a>
<a
href="mailto:[email protected]"
className="bg-red-500 text-white p-3 rounded-full"
>
<FaEnvelope className="text-2xl" />
</a>
<a
href=";
target="_blank"
className="bg-blue-700 text-white p-3 rounded-full"
>
<FaLinkedin className="text-2xl" />
</a>
</div>
</div>
</div>
<Footer />
</>
);
};
export default Contact;