export {default} from './HeroSlider.js';

[shayant98]

SyntaxError: Unexpected token 'export'

I'm trying to build a hero section using the slider, but everytime iI import "HeroSlider" the page breaks with the following error:

full stacktrace:

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.hero-slider (/.next/server/pages/index.js:514:18)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42) {
  page: '/'
}

hero.tsx

import hero1 from "@images/hero-1.png";
import HeroSlider, { Slide } from "hero-slider";

const Hero = () => {
  return (
    <section id="home" className="relative m-0 flex  flex-col items-center ">
      <HeroSlider
        height={"50vh"}
        autoplay
        controller={{
          initialSlide: 1,
          slidingDuration: 500,
          slidingDelay: 100,
          onSliding: (nextSlide) =>
            console.debug("onSliding(nextSlide): ", nextSlide),
          onBeforeSliding: (previousSlide, nextSlide) =>
            console.debug(
              "onBeforeSliding(previousSlide, nextSlide): ",
              previousSlide,
              nextSlide
            ),
          onAfterSliding: (nextSlide) =>
            console.debug("onAfterSliding(nextSlide): ", nextSlide),
        }}
      >
        <Slide
          shouldRenderMask
          label="Giau Pass - Italy"
          background={{
            backgroundImageSrc: hero1.src,
          }}
        />

        <Slide
          shouldRenderMask
          label="Bogliasco - Italy"
          background={{
            backgroundImageSrc: hero1.src,
          }}
        />
      </HeroSlider>
    </section>
  );
};

export default Hero;

[dlorddd]

I am currently facing the same issue.

[rmolinamir]

Hello, apologies for any issues caused, I'm sorry about the tardiness of my reply.

Could you guys provide a repository with this issue or steps to reproduce the problem including context regarding your runtime environments?

As a side note, I have a CodeSandbox sandbox of the hero-slider package here being used in a simple React app, but I'm having problems reproducing the issue.

[ProsperDProsper]

Same stack trace happened with me while trying to use the component...Been trying to solve the error for hours..and its weird because It actually did work in the first time I tried it..then for some reasons I dont remember what I did exactly that it stopped working...

[rmolinamir]

Thanks for the heads up @ProsperDProsper. If you don't mind I had a couple of questions that could help me debug this issue. Would you mind sharing a repo I could fork to see if I can reproduce the issue? What version of Node are you using?

[beckSafarov]

In my case for example, first the error was thrown after adding backgroundImageBlendMode prop to the Slide background. Solved the issue by reinstalling the package. Later it again broke after adding label prop to the Slide. The third time it broke after reloading the page

[rmolinamir]

Thank you all, I will take a closer look and update the open issue once I publish the update to npm.

[rmolinamir]

This issue should be fixed as of 1b22785df45638ff8a9abcdebe442ae1f90e0c0b. The problem was that the rollout output was targeting ESM rather than CJS, so I updated the configuration.

I'm sorry it took so long! Been caught up with other stuff.