CODEWITHSUNDEEP
javascriptnext.js
user3725781
user3725781

Reputation: 735

New instance of a class with next.js not working

I'm trying to use a js carousel (siema) in a next.js app, but can't get it to work. I get errors no matter what I try.

I have a slideshow component called HomeSlideShow.js:

import Head from "next/head";
import Siema from "../.next/static/js/siema";

const HomeSlideShow = props => (
 <div>
   <Head>
    <script type="module" src="_next/static/js/siema.js" />
  </Head>
  <div className="siema">
    <div>Hi, I'm slide 1</div>
    <div>Hi, I'm slide 2</div>
    <div>Hi, I'm slide 3</div>
    <div>Hi, I'm slide 4</div>
  </div>
</div>
);

export default HomeSlideShow;

I'm importing the component in the index.js file:

import HomeSlideShow from "../components/HomeSlideShow";

const Index = props => (
  <Layout>
   <HomeSlideShow />
  </Layout>
);

I just don't know how to initialise the slider using:

new Siema();

Or:

<script>
 new Siema();
</script>

as per the docs. Wherever I try it, it errors. Any pointers?

Thank you.

Upvotes: 0

Views: 1800

Answers (1)

iurii
iurii

Reputation: 4230

I think you need to convert function component into class component and try to initialize siema plugin inside componentDidMount lifycycle method as it is executed after initial render

import Head from 'next/head';
import Siema from '../.next/static/js/siema';

class HomeSlideShow extends React.component {
  componentDidMount() {
    new Siema();
  }

  render() {
    return (
      <div>
        <Head>
          <script type="module" src="_next/static/js/siema.js" />
        </Head>
        <div className="siema">
          <div>Hi, I'm slide 1</div>
          <div>Hi, I'm slide 2</div>
          <div>Hi, I'm slide 3</div>
          <div>Hi, I'm slide 4</div>
        </div>
      </div>
    );
  }
}

export default HomeSlideShow;

Hope this helps!

Upvotes: 1

Related Questions