https://i.sstatic.net/9PehR.jpgI am encountering the error message displayed above, and I am uncertain about the cause of this issue. In the code snippet below, I am fetching data from a file named Data.js located in my root folder. When I run the app, I receive the mentioned error message. However, when I use the same data without importing it from an external file, everything works perfectly. This inconsistency is puzzling to me. Can someone please point out what I might be doing wrong? Your assistance is much appreciated. Thanks in advance. Services.js

import { FaCircle, FaShoppingCart, FaLaptop, FaLock } from 'react-icons/fa'
import  { serviceLinks } from '../../../Data'

const data = serviceLinks;
console.log(data);
// const serviceLinks = [
    
//     {
//         title:'Haircut',
//         text:'All dependencies are kept current to keep things fresh.'
       
//     },
//     {
//         title:'Barberos',
//         text:'You can use this design as is, or you can make changes!'
        
//     },
//     {
//         title:'Color',
//         text:'Is it really open source if its not made with love?'
        
//     }, 
// ]

const icons = [
    FaShoppingCart, FaLaptop, FaLock
    
]
function Services () {
    
    return (
        <section className="page-section" id="services">
            <div className="container">
                <div className="text-center">
                    <h2 className="section-heading text-uppercase">Services</h2>
                    <h3 className="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                </div>
                <div className="row text-center">
                    { data.map((service,idx) => {
                        const Icon = icons[idx];
                        console.log(Icon)
                        return (
                            <div className="col-md-4" key={idx}>                        
                            <span className="fa-stack fa-4x">
                                <FaCircle className="svg-inline--fa fa-circle w-16 fa-stack-2x text-dark" height={100} width={100} />
                                <Icon className="svg-inline--fa fa-shopping-cart fa-w-18 fa-stack-1x fa-inverse" fill="white" />
                            
                            </span>
                            <h4 className="my-3">{service.title}</h4>
                            <p className="text-muted">{service.text}</p>
                        </div>
                        )
                    })
                  
                    }
                </div> 
            </div>
        </section>
    )
}
export default Services;

data.js

 const galleryLinks = [
    {
        title:'HairStyle',
        haircutName:'Afro',
        imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbers_afro.jpg",
        imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbers_afro.jpg",
    },
     {
        title:'Hairstyle',
        haircutName:'Blondo',
        imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbers_blondo.jpg",
        imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbers_blondo.jpg",
    },
    {
        title:'Hairstyle',
        haircutName:'Chica',
        imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbers_chica.jpg",
        imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbers_chica.jpg",
    },
    {
        title:'Hairstyle',
        haircutName:'Nino',
        imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbershow_nino.jpg",
        imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbershow_nino.jpg",
    },
    {
        title:'HairStyle',
        haircutName:'Wavy',
        imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbershow_wavy.jpg",
        imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbershow_wavy.jpg",
    },
    {
        title:'HairStyle',
        haircutName:'Blondo2',
        imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbershow_blondo2.jpg",
        imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbershow_blondo2.jpg",
    },   
    
]

  const serviceLinks = [
    {
        title:'study our themes',
        text:'Our themes are updated regularly to keep them bug free!',
        icons:"assets/img/logo/Hnet.com-image.svg",
    },
    {
        title:'Haircut',
        text:'All dependencies are kept current to keep things fresh.',
        icons:"assets/img/logo/clipper.svg",
    },
    {
        title:'Barberos',
        text:'You can use this design as is, or you can make changes!',
        icons:"assets/img/logo/barber_chair.svg",
    },
    {
        title:'Color',
        text:'Is it really open source if its not made with love?',
        icons:"assets/img/logo/hairstyle.svg",
    }, 
]

export { galleryLinks,  serviceLinks};

index.js

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
import Header from './src/components/Header'
import Services from './src/components/Services'

export default function Home() {
  return (
    <div className="container-fluid">
      <Head>
        <title>Dr Cut TheBarber Show</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="main">
       <Header />
       <Services />
      </main>

      <footer className="footer text-center">
        <a
          className="text-decoration-none text-dark"
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
      </div>
    
  )
}