Updated code after some suggestions from comments(still getting the same error):
const bcrypt = require("bcrypt")
const User = require("../../model/userModel")
export async function POST(req: NextRequest) {
await dbConnect()
const res = await req.json()
await bcrypt.hash(res.passwd, 10)
.then(async (hashedPassword: any) => {
//create a new user instance and collect the data
const user = new User({
firstname: res.firstname,
lastname: res.lastname,
company: res.company,
phone: res.phone,
email: res.email,
password: hashedPassword,
})
await user.save()
//return succes if the new user is added to the database
.then((result: string) => {
return NextResponse.json({message: "User created successfully "},{status : 201})
})
.catch((err: string) => {
console.log("error" + err)
return NextResponse.json({message: "Error creating user :"},{status : 500})
})
})
.catch((err: string) => {
console.log("error" + err)
return NextResponse.json({message: "Password was not hashed successfully "},{status : 500})
})
}
I cant find out why i get this error:
-
error
TypeError: Cannot read properties of undefined (reading ‘headers’)
at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:265:61) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Ive seen similar error but the answer to the problem was to return the NextResponse.json() but im already doing it and I still get the error.
This is where im calling the POST request:
async function createUser(ev: any){
ev.preventDefault()
const data = {firstname, lastname, company, phone, email, passwd}
await axios.post("./api/register", data)
}
//Email validation
function isValidEmail(email: string) {
return /S+@S+.S+/.test(email);
}
return (
<>
<main className="flex justify-center items-center w-screen min-h-screen bg-[url('../public/bg-login.jpg')] bg-no-repeat bg-cover">
<div className="flex flex-col w-1/2 h-3/4 rounded-lg shadow-2xl shadow-white m-5">
<form onSubmit={createUser} className="w-full">
<div className="grid sm:grid-cols-1 md:grid-cols-2 gap-10 mb-5 mr-5 ml-5 mt-5">
<div>
<label htmlFor="firstname" className="text-white block mb-2 text-sm font-medium dark:text-white">*First name</label>
<input
className="outline-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:border-blue-500 p-2 w-full"
type="text"
onChange={ (e) => {
setFirstname(e.target.value)
}}
placeholder="First name"
value={firstname}
id="firstname"
required/>
</div>
<div>
<label htmlFor="lastname" className="text-white block mb-2 text-sm font-medium dark:text-white">*Last name</label>
<input
className="outline-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:border-blue-500 p-2 w-full"
type="text"
onChange={ (e) => {
setLastname(e.target.value)
}}
placeholder="Last name"
value={lastname}
id="lastname"
required/>
</div>
<div>
<label htmlFor="company" className="text-white block mb-2 text-sm font-medium dark:text-white">*Company</label>
<input
className="outline-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:border-blue-500 p-2 w-full"
type="text"
onChange={ (e) => {
setCompany(e.target.value)
}}
placeholder="Zincometal"
value={company}
id="company"
required/>
</div>
<div>
<label htmlFor="phone" className="text-white block mb-2 text-sm font-medium dark:text-white">*Phone number</label>
<input
className="outline-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:border-blue-500 p-2 w-full"
type="number"
onChange={ (e) =>
{
setPhone(e.target.valueAsNumber)
}}
placeholder="xx-xxx-xxx-xx"
value={phone}
id="phone"
required/>
</div>
<div className="md:col-span-2 sm:col-span-1">
<label htmlFor="email" className="text-white block mb-2 text-sm font-medium dark:text-white">*Email Address</label>
<input
className="outline-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:border-blue-500 p-2 w-full"
type="text"
onChange={ (e) =>
{
if (!isValidEmail(e.target.value)){
setError(true)
}else{
setError(false)
}
setEmail(e.target.value)
}}
placeholder="[email protected]"
value={email}
id="email"
required/>
</div>
<div className="md:col-span-2 sm:col-span-1">
<label htmlFor="passwd" className="text-white block mb-2 text-sm font-medium dark:text-white">*Password</label>
<input
className="outline-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:border-blue-500 p-2 w-full"
type="password"
onChange={ (e) =>
{
setPasswd(e.target.value)
}}
placeholder="*******"
value={passwd}
id="passwd"
required/>
</div>
<div className="md:col-span-2 sm:col-span-1">
<label htmlFor="confPasswd" className="text-white block mb-2 text-sm font-medium dark:text-white">*Confirm Password</label>
<input
className="outline-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:border-blue-500 p-2 w-full"
type="password"
onChange={ (e) =>
{
setConfPasswd(e.target.value)
}}
placeholder="*******"
value={confPasswd}
id="confPasswd"
required/>
</div>
<div className="flex items-start">
<div className="flex items-center h-6">
<input
className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300"
type="checkbox"
value=''
id="remember"/>
</div>
<label htmlFor="remember" className="ml-2 text-sm font-medium text-white">
I agree with the <a href="#" className="text-blue-600 hover:underline dark:text-blue-500">terms and conditions</a>.
</label>
<Link href="./" className="mr-5 mt-5 font-medium text-white text-right hover:underline decoration-solid">
Return to login <--
</Link>
{error && <div>{error}</div>}
</div>
</div>
<button type="submit" className="ml-5 mb-5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
</form>
</div>
</main>
</>
)
}
2
Answers
It seems like you have some wrongly formatted JSON in your
NextResponseI would check each one if it’s valid by console logging with
JSON.stringify(responseThatIWantToSend)before returning withNextResponse.Also, for clarity I would only use the
async...awaitwithtry...catchsyntax.I encountered a similar problem, and after some investigation, I managed to resolve it by adding the line
return NextResponse.json(store);inside the try block. I thought I’d share my solution here in case it helps others facing the same issue.
Initially, I was experiencing [describe your initial problem briefly]. After reviewing the code, I noticed that the try-catch block was not handling the response correctly, which caused the problem. So, I decided to add the following line inside the try block just before the catch block:
This line specifically handles the response and ensures that the data is correctly returned from the API call. After making this change, the issue was resolved, and everything worked as expected.
Keep in mind that the specific solution might vary depending on your code and the context of your problem, but for me, this addition proved to be the fix. Remember to also check if there are any other potential issues in your code that could be causing the problem.
I hope this solution helps others facing a similar problem. If you have any questions or need further assistance, feel free to ask.