Fails to Compile - Need a loader??

[zanewolf]

Description

I'm trying to incorporate the fullpage component into my gatsby site. However, I'm running into a curious error (see Terminal Error below). It informs me I need a loader of index.js, but since other js files are running with no problem, I'm a bit flummoxed.

Link to isolated reproduction with no external CSS / JS

[codesandbox.io] I just replicated the modifications I made in my own code to transform the component to a functional component instead. It works in the sandbox, so I don't think the problem is with the actual modifications, but something on the gatsby side of things, unfortunately. However, I'm still hoping someone knows what the issue might be.

Code

import * as React from 'react'
import ReactFullpage from "@fullpage/react-fullpage/components/ReactFullpage";

const AboutPage = () => {

    const onLeave = (origin, destination, direction) =>  {
        console.log("Leaving section " + origin.index);
    }
    const afterLoad = (origin, destination, direction) =>  {
        console.log("After load: " + destination.index);
    }

    return (
        <ReactFullpage
            scrollOverflow={true}
            sectionsColor={["orange", "purple", "green"]}
            onLeave={onLeave}
            afterLoad={afterLoad}
            render={({state,fullpageAPI}) => {
                return (
                    <div id="fullpage-wrapper">
                        <div className="section section1">
                            <h3>Section 1</h3>
                        </div>
                        <div className="section">
                            <div className="slide">
                                <h3>Slide 2.1</h3>
                            </div>
                            <div className="slide">
                                <h3>Slide 2.2</h3>
                            </div>
                            <div className="slide">
                                <h3>Slide 2.3</h3>
                            </div>
                        </div>
                        {/*<div className="section">*/}
                        {/*    <h3>Section 3</h3>*/}
                        {/*    <button onClick={() => fullpageApi.moveTo(1, 0)}>*/}
                        {/*        Move top*/}
                        {/*    </button>*/}
                        {/*</div>*/}
                    </div>
                );
            }}
        />
    );
    // }
}

export default AboutPage

Terminal Error:

Versions

Browser: Brave Editor: Webstorm Framework; Gatsby, React

[alvarotrigo]

Did you see the Gatsby example for fullPage.js?

[zanewolf]

I honestly couldn't get it to work. The instructions on that particular front were a little sparse (kinda finding my own way in this coding thing, please forgive me if I missed something obvious), so I tried cloning the repo and copying over the files I thought were necessary into my project dir. It compiled, but essentially broke the site. Console was a list of errors a mile long. The modified react approach seems easier?

[alvarotrigo]

Try running that exact demo. It should be compiling fine. Instructions on that same readme. https://github.com/alvarotrigo/react-fullpage/tree/master/examples/gatsby

[zanewolf]

So, in all honesty, I couldn't get your example gatsby repos to run. The only one I could get working was this one, so that's what I ran with. Now, I'm trying to enable autoplay on horizontal sliders, and I'm running into a new error on the callback function afterload.

import React from "react";
import ReactFullpage from "@fullpage/react-fullpage";
import Layout from "../components/Layout";
import styled from "styled-components";

let g_interval;

const Test = (fullpageProps, data) => (

    <Layout pageTitle="Test">
        <ReactFullpage
            slidesNavigation
            afterLoad={(origin, destination, direction)=>{
                clearInterval(g_interval);

                // 1000 milliseconds lapse
                const lapse = 1000;
                const shouldAutoPlay = destination.item.hasAttribute('autoPlay');

                const hasSlides = destination.item.querySelectorAll('.fp-slides').length;

                if(shouldAutoPlay && hasSlides){
                    g_interval = setInterval(function () {
                        fullpageApi.moveSlideRight();
                    }, lapse);
                }
            }}
            {...fullpageProps}

            render={({ state, fullpageApi }) => {
                console.log("render prop change", state); // eslint-disable-line no-console

                if (state.callback === "onLeave") {
                    if (state.direction === "down") {
                        console.log("going down..." + state.origin.index);
                    }
                }
                return (
                    <div id="fullpage-wrapper">
                        <EventsDiv className="section" autoPlay >
                            <div className="slide" >
                                <div>
                                    <h2>George Lauder</h2>
                                </div>
                            </div>
                            <div className="slide" >
                                <div>
                                    <h2>Sylvia Plath</h2>
                                </div>
                            </div>
                            <div className="slide">
                                <h3>Slide 2.3</h3>
                            </div>
                        </EventsDiv>
                    </div>
                );
            }}
        />
    </Layout>
);

export default Test;

const EventsDiv = styled.div`
  background: midnightblue;
  height: 100vh;
`

with the error that fullpageApi is undefined within afterLoad. I tried including fullpageApi in the function definition, but that's also undefined. Any idea what I'm missing?

(Also, please let me know if you would like me to close this issue and start another one with this error.)