I attempted to import a function because I want to click on <il> servies</il> and scroll to the services section on the home page. However, I simply want to click on the li element in the navbar and scroll to the service section on the home page. Both pages are different which is why my module is not working on NEXT.JS
**Images of code ** navbar code image services page code image
**Facing ERROR *
Import trace for requested module:
./components/Navbar.js
wait - compiling...
error - ./components/Navbar.js
Error:
x Expected ',', got ':'
,-[D:\Next.js projects\help-desk\components\Navbar.js:8:1]
8 | const ref = useRef();
9 | const scrollToSection = (elementRef) =>{
10 | window.scrollTo(
11 | top:elementRef.current.offsetTop,
: ^
12 | behavior: 'smooth'
13 | )
13 | }
`----
Caused by:
Syntax Error
Import trace for requested module:
./components/Navbar.js
navbar.js Code:
import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { useRef } from 'react'
import { AiOutlineSearch } from 'react-icons/ai';
AiOutlineSearch
const Navbar = () => {
const ref = useRef();
const scrollToSection = (elementRef) =>{
window.scrollTo(
top:elementRef.current.offsetTop,
behavior: 'smooth'
)
}
return (
<>
<div className='flex flex-col md:flex-row md:justify-start justify-center items-center py-1 drop-shadow-xl bg-slate-100'>
<div className='logo mx-9 cursor-pointer'>
<Image width={70} height={70} src="/navhome.png" alt=" " />
</div>
<div className="nav">
<ul className='flex items-center space-x-6 font-bold md:text-md'>
<Link legacyBehavior href={"/"}><a><li>Home</li></a></Link>
<Link legacyBehavior href={"/about"}><a><li>About</li></a></Link>
{/* <Link legacyBehavior href={"/servies"}><a><li>Services</li></a></Link> */}
<li onClick={()=> scrollToSection(ref) href="#section"}>Services</li>
<Link legacyBehavior href={"/contact"}><a><li>Contact</li></a></Link>
</ul>
</div>
<div className="search absolute right-0 top-6 mx-5">
<AiOutlineSearch className='text-xl md:text-3xl'/>
</div>
</div>
</>
)
}
export default Navbar;
export { scrollToSection };
index.js file:
import Image from 'next/image'
import Head from 'next/head'
import Link from 'next/link'
import {scrollToSection} from '../components/Navbar.js'
import Servies from '../pages/servies'
export default function Home() {
return (
<div>
<Head>
<title>HelpDesk.com - we're here to serve you </title>
<meta name="description" content="HelpDesk.com - we're here to serve you" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div>
<img src="/home.jpg" alt="" />
</div>
<section ref={ref} className='scrollService' id='sectionid' >
<Servies />
</section>
<br />
</div>
)
}