Cannot read properties of undefined (reading 'call')

[sumeet030990]

Getting error

with little debugging found out that in render method
state: {}
fullpageApi: undefined

[alvarotrigo]

Can you please provide an isolated reproduction in Codesandbox with no CSS or JS files external to fullPage.js and the minimum amount of HTML code. Use empty sections unless strictly necessary for reproduction.

[sumeet030990]

As soon as i am importing
import ReactFullpage from '@fullpage/react-fullpage';
getting the error

[alvarotrigo]

I cant see any error here:
https://codesandbox.io/s/m34yq5q0qx

Make sure to uses the latest version 0.1.22

[sumeet030990]

PFA the video and the content.js file for your reference
reactFullPage.zip

[alvarotrigo]

I'd prefer a reproduction in codesandbox :)

[Salman-Apptware]

@alvarotrigo same issue with Next js
As soon as i am importing
import ReactFullpage from '@fullpage/react-fullpage';
getting the error

[alvarotrigo]

Did you take a look at the docs regarding server rendering?
https://github.com/alvarotrigo/react-fullpage#server-side-rendering

[sumeet030990]

@alvarotrigo : If I am using the latest version then I am getting that error
but if I switch to old version i.e. on v0.1.19 then its working properly

[alvarotrigo]

Interesting... do you have any URL or codesandbox I can check?

[alvarotrigo]

The Next demo seems to be working just fine:
https://github.com/alvarotrigo/react-fullpage/tree/master/examples/next

So not quite sure how to reproduce this error on my side.

I'll wait for a reproduction before closing the issue.

[AlxPE]

I'm experiencing the same issue on React with dev and prod builds.

From what I see, it's not that easy to reproduce it in codesandbox as conflict appears with webpack and a proper configuration should be added to codesandbox.

[alvarotrigo]

@ankitsinghaniyaz any idea what can this be?

[muhammadmahad-debug]

Any update I got this issue again and again

[alvarotrigo]

@muhammadmahad-debug you can revert back to the previous version 0.1.18 while we investigate the issue.

[cskovgaard]

I'm also experiencing this issue with the same error message.
I am not able to reproduce the issue in codesandbox - my setup is a React app in a NX workspace with a custom webpack config. I have also tried the default NX webpack config, and it yields the same result.
My versions:

• react-fullpage v. 1.0.22
• React v. 17.0.2

Strangely enough, when reverting to 0.1.18 it can't find the module declaration:

I don't know if there's anything I'm missing, but I guess that's also a different issue.
FYI: 0.1.18 and 0.1.19, I can't find the module, and 0.1.20 and onwards I get the issue reported in this thread.

[alvarotrigo]

@cskovgaard doesn't seem to be related with the issue discussed on this topic. Probably a types issue?

[sumeet030990]

@cskovgaard just run the command npm i --save-dev @types/fullpafe__react-fullpage
most probable your issue ll be resolved

[cskovgaard]

@sumeet030990, unfortunately no, that package does not exist.

I was able to resolve the original issue, using version 0.1.22, after migrating my Nx-setup to the latest version.
This bumped the React-version from 17.0.2 to 17.0.40, and Webpack from 4.46.0 to ^5.58.1.

Hope this can be helpful to others experiencing this problem.

[pl12133]

@alvarotrigo I've also encountered this error, it seems like compatibility with Webpack 4 was lost in version @fullpage/[email protected]. Everything works fine in Webpack 5.

Here is how I was able to reproduce the error:

npx create-react-app --scripts-version=4.0.0 react-fullpage-crash-test
cd react-fullpage-crash-test

npm install @fullpage/[email protected]

# add the import to src/App.js
echo -e "import ReactFullpage from '@fullpage/react-fullpage';\n$(cat src/App.js)" > src/App.js

npm start

[alvarotrigo]

@pl12133 any solution in mind?

[pl12133]

For now I think it would be enough to recommend Webpack 4 users only install 0.1.19.

I gave this a try for an hour today and messed around with the externals and library webpack config options but couldn't get anywhere. I think it's probably related to module resolution instead of the externals or output options.

I will give this another look but my app will soon be updating to Webpack 5 and that may be how we solve this on my side.

[alvarotrigo]

@pl12133 noted! Thanks 👍

[muhammadmahad-debug]

@alvarotrigo I just resolved this issue by upgrading react-scripts to V5

[alvarotrigo]

Thanks for letting us know @muhammadmahad-debug ! 👍

[muhammadmahad-debug]

@alvarotrigo Can you please release package with CARD and CARTOPTION as optional props or I can create PR for you I need it so do this ASAP

[alvarotrigo]

@muhammadmahad-debug done! New version 0.1.23

[FrancoisSoler]

Hi, i'm trying to use react Fullpage but it does not work. Once installed, I had the same issue as op, so i used "@fullpage/react-fullpage": "^0.1.19", now I have no more error except the message in console telling me to use the licenseKey prop. Weird because I had setup this with my newly purchased license. any idea ? thanks

return (
    <Box className="boxWrapper">
      <ReactFullpage
        //fullpage options
        licenseKey='XXXXX-XXXXX-XXXXX-XXXXX-XXXXX'
        scrollOverflow={true}
        render={({ state, fullpageApi }) => {
          return (
            <ReactFullpage.Wrapper>
              {posts.map(({ key, link, isLast, Wrapper, i }) => (
                <Wrapper key={key} className="wrapperPost">
                  <Box className="section">
                    <Post
                      post={post}
                      postData={postData}
                      link={link}
                      isLast={isLast}
                      key={key}
                    />
                  </Box>

                  {!isLast && <hr />}
                </Wrapper>
              ))}
            </ReactFullpage.Wrapper>
          );
        }}
      />
      <Container
        css={css`
          background: ${bgColorArticle};
        `}
      >
        {isFetching && <Loading />}
        {(isLimit || isError) && (
          <Button
            onClick={fetchNext}
            css={css`
              background: ${colorsHover};
              transition: all 0.3s ease-in-out;
              &:hover {
                transform: scale(0.9);
              }
            `}
          >
            {isError ? "Essayer à nouveau" : "Charger plus"}
          </Button>
        )}
      </Container>
    </Box>
  );
};

[alvarotrigo]

so i used "@fullpage/react-fullpage": "^0.1.19",

Try updating to the latest version react-fullpage 0.1.27

[FrancoisSoler]

so i used "@fullpage/react-fullpage": "^0.1.19",

Try updating to the latest version react-fullpage 0.1.27

Thanks for the very fast response, but has I said if I use the last version same message as op is displayed. there is no work around beside update webpack ?

[alvarotrigo]

@FrancoisSoler It seems like so.
If you prefer to use an older version like 0.1.19 use the contact form to ask for a license key for fullPage.js v3 (current is v4). However, note that will not get maintained nor updated anymore.

[FrancoisSoler]

thanks for your help

[Bilal-Bangash]

@alvarotrigo

getting same error

my current package.json looks like

OS : Windows 10
Node Versions I tried: 16.13.1, 14.16.0, 18.2.0

[cskovgaard]

@Bilal-Bangash, try updating your version of react-scripts to 4+

[Bilal-Bangash]

@Bilal-Bangash, try updating your version of react-scripts to 4+
@cskovgaard
Yes, Thank you I updated react-scripts. It is working now