caught SyntaxError: The requested module '/src/hoc/SectionWrapper.jsx?t=1681652963874' does not provide an export named 'SectionWrapper' (

Question

I'm getting this error "caught SyntaxError: The requested module '/src/hoc/SectionWrapper.jsx?t=1681652963874' does not provide an export named 'SectionWrapper' (at About.jsx:7:10)".

I have a component named "About.jsx":

import React from 'react'
import { Tilt } from 'react-tilt'
import { motion } from 'framer-motion'
import { styles } from '../styles'
import { services } from '../constants'
import { fadeIn, textVariant } from '../utils/motion'
import { SectionWrapper } from '../hoc/SectionWrapper'

const ServiceCard = ({index, icon, title}) => {
  return (
    <Tilt className="xs:w-[250px] w-full">
      <motion.div 
        variants={fadeIn("right", "spring", 0.5*index, 0.75)}
        className='w-full green-pink-gradient p-[1px]
        rounded-[20px] shadow-card'
      >
        <div 
          options={{
            max: 45,
            scale: 1,
            speed: 450
          }}
          className='bg-tertiary rounded-[20px] py-5 px-12
          min-h-[280px] flex justify-evenly items-center flex-col'
        >
          <img src={icon} alt={title} 
          className='w-16 h-16 object-contain'/>
          <h3 className='text-white text-[20px]
          font-bold text-center'>{title}</h3>
        </div>
      </motion.div>
    </Tilt>
  )
}

const About = () => {
  return (
    <>
      <motion.div variants={textVariant()}>
        <p className={styles.sectionSubText}>Introduction</p>
        <h2 className={styles.sectionHeadText}>Overview.</h2>
      </motion.div>
      <motion.p 
      variants={fadeIn("", "", 0.1, 1)}
      className='mt-4 text-secondary text-[17px]
      max-w-3xl leading-[30px]'
      >
        I'm a skilled software developer with experience in
        TypeScript and JavaScript, and expertise in 
        frameworks like React, Node.js, and Three.js. 
        I'm a quick learner and collaborate closely with 
        clients to create efficient, scalable, and user-friendly 
        solutions that solve real-world problems. Let's work 
        together to bring your ideas to life!
      </motion.p>
      <div className="mt-20 flex flex-wrap gap-10">
        {services.map((service, index) => {
          return <ServiceCard key={service.title} index={index} title={service.title} icon={service.icon} />
        })}

      </div>
    </>
  )
}

export default SectionWrapper(About, "about")

and I have a folder called hoc which contains : a component named SectionWrapper.jsx :

import { motion } from 'framer-motion'
import { styles } from "../styles"
import { staggerContainer } from "../utils/motion";

const SectionWrapper = (Component, idName) => 
        function HOC(){
            return (
                <motion.section
                variants={staggerContainer()}
                initial="hidden"
                whileInView="show"
                viewport={{ once :true, amount: 0.25 }}
                className={`${styles.padding} max-w-7xl mx-auto
                relative z-0`}
                >
                    <Component />
                </motion.section>
            )
        }

export default SectionWrapper

and an index.js in the same folder hoc :

import SectionWrapper  from "./SectionWrapper";

export default { SectionWrapper }

I want to make Section Wrapper for all my page sections but it gives me this error

Answer 1

mee too got the same error and i have found that the motion.p tag is renderring properly so change your about.jsx and SectionWrapper.jsx into this

const About = () => {
  return (
    <AnimatePresence>
    <>
      <motion.div>
        <p className={styles.sectionSubText}>Introduction</p>
        <h2 className= {styles.sectionHeadText}> Overview</h2>

      </motion.div>

      <motion.p
        variants={fadeIn(',',0.1,1)}
        className='mt-4 text-white
        text-[17px] max-w-3xl leading-[30px]'
      >
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima harum a praesentium 
        inventore quas ea, odit suscipit architecto id? Quasi suscipit nam molestiae cum esse similique voluptates 
        voluptatibus vitae vero!
        
      </motion.p>
      <div className='mt-20 flex flex-wrap gap-10'>
        {services.map((service , index) => (
          <ServiceCard key={service.title} index ={index} {...service} />
        ))}

      </div>
    </>
    </AnimatePresence>
  )
}

and the SectionWrapper into

import { motion } from 'framer-motion';
import { styles } from '../styles';
import { staggerContainer } from '../utils/motion';

const SectionWrapper = (Component, idName) => {
  const WrappedComponent = () => (
    <motion.section
      variants={staggerContainer()}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, amount: 0.25 }}
      className={`${styles.padding} max-w-7xl mx-auto relative z-0`}
    >
      <span className="hash-span" id={idName}>
        &nbsp;
      </span>
      <Component />
    </motion.section>
  );

  return WrappedComponent;
};

export default SectionWrapper;

this will make your code work :-)!

Answer 2

try this :

About.jsx
===========
from this -> import { SectionWrapper } from '../hoc/SectionWrapper';

to this -> import SectionWrapper from "../hoc";

Index.js
===========

to this -> 
import SectionWrapper from "./SectionWrapper";

export default SectionWrapper;