react-fullpage icon indicating copy to clipboard operation
react-fullpage copied to clipboard

fullpage_api doesn't exist on window

Open devAdrish opened this issue 2 years ago • 7 comments

Description

I am using Next.js and typescript. When I try to access fullpage_api, it gives me following error: 'Property 'fullpage_api' does not exist on type 'Window & typeof globalThis'

image

Although it works when running locally, build fails.

image

Versions

Fullpage Version 0.1.36

devAdrish avatar Mar 22 '23 10:03 devAdrish

Where are you trying to execute it?

If you are inside the render function of the fullpage component you can use fullpageApi instead.

alvarotrigo avatar Mar 22 '23 11:03 alvarotrigo

Can you try adding this on /types/index.d.ts on the react-fullpage component folder and let me know if it fixes it for you?

declare global {
    interface Window {
        fullpage_api:any;
    }
}

alvarotrigo avatar Mar 22 '23 11:03 alvarotrigo

Did try this, fullpage-api becomes undefined. And yes, works inside the render function, but should be available outside of it. Can you not export this api from the package so one can import it and use it. Y'know something like import { fullpage-api } from '@fullpage/react-fullpage.

devAdrish avatar Mar 22 '23 12:03 devAdrish

Did try this, fullpage-api becomes undefined.

It's with underscore: fullpage_api

alvarotrigo avatar Mar 22 '23 16:03 alvarotrigo

Can you not export this api from the package so one can import it and use it.

I'll be happy to merge a pull request if you think that's an option.

Note however that the variable window.fullpage_api is created dynamically once fullpage.js gets initialized, so it just doesn't exist before this step.

@cmswalker what are your thoughts on this?

alvarotrigo avatar Mar 22 '23 16:03 alvarotrigo

Hi Everyone,

I am quite late to the game. @alvarotrigo I think the problem is, in a typescript world, you have to do one of two things which are both problematic from a developer standpoint:

  1. use the prop fullpageApi in the render function -> this limits the usage of the api from content within <ReactFullpage>
  2. use the prop window.fullpage_api which is not defined/exported -> dev needs to make a type declaration of window.fullpage_api himself

So in my mind the simple solution is to export fullpage_api as a variable from within the library. This way developers do not need to know about the inner workings of fullpage.js and can just use the library (in typescript) the way they expect it.

denisdanielyan avatar Jun 26 '24 15:06 denisdanielyan

@denisdanielyan if that's possible, that sounds great! Would you be able to provide a PR with the changes?

alvarotrigo avatar Jun 26 '24 17:06 alvarotrigo