Next.js Discord

Discord Forum

Next.js error

Unanswered
Bonga shad posted this in #help-forum
Open in Discord
Bonga shadOP
I am encountering this error on my next.js app, my website is running but still I am encountering this error. What's wrong?

26 Replies

Bonga shadOP
happened after i put this a tag
Netherland Dwarf
@Bonga shad are you still having it?
Usually this happens when using lets say vscode editor and you have auto save
You just need to restart the server
@Netherland Dwarf You just need to restart the server
Bonga shadOP
^
Netherland Dwarf
It shows the error of missing an html closing tag
Did you add that fix?
Bonga shadOP
my code editor is not showing any error, and i dont have missing closing tag
Netherland Dwarf
Csn you try comment blocking the change you added
Just to double check that the error is indeed coming from there
And not from somewhere else
@Netherland Dwarf Csn you try comment blocking the change you added
Bonga shadOP
then it works
Netherland Dwarf
Can you show
The code snippet
@Netherland Dwarf The code snippet
Bonga shadOP
import React from 'react'
import { projects } from '@/data'
import { PinContainer } from './ui/3d-pin'
import { FaLocationArrow } from 'react-icons/fa'

const RecentProjects = () => {
    
  return (
    <div className="py-20" id="projects">
        <h1 className='heading text-blue-500'> 
            Projects developed by me
        </h1>
        <div className="flex flex-wrap items-center justify-center p-4 gap-x-24 gap-y-12 mt-10">
            {projects.map(({id,title,des,img,iconLists,link})=> (
               
                <div key={id} className='flex items-center justify-center w-[80vw] sm:w-[570px] h-[25rem] sm:h-[32rem] lg:min-h-[32.5rem] mb-10'>
                   <PinContainer title={link} href={link}>
                   <div className="relative items-center justify-center sm:w-96 w-[80vw] overflow-hidden h-[20vh] lg:h-[30vh] mb-10">
  <div className='relative w-full h-full overflow-hidden lg:rounded-3xl bg-[#13162d]'>
    <img src="/bg.png" alt="bg-img" className='w-full h-full object-cover' />  
  </div>
  <img src={img} alt={title} className='z-30 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 max-w-full max-h-full'/>
</div>
                    <h1 className='font-bold lg:text-2xl md:text-xl text-base line-clamp-1'>
                        {title}
                    </h1>
                    <p className='lg:text-xl lg:font-normal font-light text-sm line-clamp-2'>
                        {des}
                    </p>

                    <div className='flex items-center justify-between mt-7 mb-3'>
                        <div className='flex items-center'>
                            {iconLists.map((icon,index)=> (
                                <div key={icon} className='border border-white/[0.2] rounded-full bg-black lg:w-10 lg:h-10 w-8 h-8 flex justify-center items-center' style={{
                                    transform:`translateX(-${5 * index * 2}px)`}}>
                                     <img src={icon} alt={icon} className='p-2'/>
                                     </div>
                            ))}
                        </div>
                        <div className='flex justify-center items-center'>
                         <p className='flex lg:text-xl md:text-xs text-sm text-purple'>Check live site</p>
                         <FaLocationArrow className='ms-3' color="#CBACF9"/>
                        </div>
                    </div>

                   </PinContainer>
                    </div>
        
        ))}
        </div>
    </div>
  )
}

export default RecentProjects
this is working part
but when i wrap div with a tag it shows that error
Netherland Dwarf
How are you wrapping it
Like <a>
…
</a>
And also which div
@Netherland Dwarf How are you wrapping it
Bonga shadOP
this div
@Netherland Dwarf Like <a> … </a>
Bonga shadOP
yes
Bonga shadOP
@Netherland Dwarf