TypeError: Cannot read property 'destroy' of undefined

[creaux]

Description

I'm using it with typescript and getting following error.

TypeError: Cannot read property 'destroy' of undefined at ReactFullpage.destroy Do you have any idea what could be the cause?

Further investigation

I have found following https://github.com/alvarotrigo/react-fullpage/blob/master/components/ReactFullpage/index.js#L14 defined variable using let which is used down bellow.

Here https://github.com/alvarotrigo/react-fullpage/blob/master/components/ReactFullpage/index.js#L126 it should register fullpage_api on window but it doesn't for some reason.

[CyberSecDemon]

I have run into this issue in the following scenario:

Browsers: IE11

Using:

NextJS < 10.1.3 React-Fullpage ^0.1.19 WebPack 4 & 5 Errors:

SCRIPT445: Object doesn't support this action Unhandled promise rejection TypeError: Unable to get property 'destroy' of undefined or null reference Unhandled promise rejection Error: Cancel rendering route

Steps to recreate:

1. Create a NextJS app with Custom Server using Express.
2. Place React-Fullpage in index.js. Use _app.js to call.
3. Create two page slides with sections.
4. Load the page in Dev Mode and it will return a blank white screen.

Settings:

          pluginWrapper={pluginWrapper}
          onLeave={this.onLeave.bind(this)}
          parallax={false}
          parallaxOptions={'cover', 100, 'background'}
          navigation={false}
          responsiveWidth={768}

Note: Happens with or without settings.

Attempted Resolutions:

Note: None of these worked.

package.json: browser: fs: "empty"

next.config.js:

config.resolve.fallback.net = false; config.resolve.fallback.tls = false; config.resolve.fallback.path = require.resolve('path-browserify/') config.resolve.fallback.zlib = false; config.resolve.fallback.http = false; config.resolve.fallback.https = false; config.resolve.fallback.fs = "empty"; config.resolve.fallback.stream = false; config.resolve.fallback.crypto = false; config.resolve.plugins = [new NodePolyfillPlugin()];

Other attempts:

core-js polyfills node-polyfill-webpack-plugin path-browserify add node: 'empty' to next.config.js change webpack config to 'node' Attempted direct package modification, no luck.

Problem area:

It seems as if this stems from something else entirely. In webpack 4 I receive 'net' is missing. In webpack 5 'destroy' is missing. I'm assuming since everything is loaded SSG the document is not defined yet and for what ever reason needs to call fs and stream, thus breaking everything. Even with Polyfills this continues. I've even attempted to chop the components used into multiple components and lazy load them in, the problem here is that the height and width are constantly broken and the DOM does not recognize Fullpage.js properly to scroll in Parallax. I even attempted to take the example project and use it as well to load it, no luck.

Slight Resolution:

Moving React-Fullpage to ComponentDidMount allows the page to load with styling but does not allow any movement.

NOTE: This also is occurring on the example application...

What can be done to resolve this?

[alvarotrigo]

NOTE: This also is occurring on the example application...

I'm not able to reproduce it. Using examples/next. Doing npm run dev and then accessing http://localhost:3000.

All working fine on IE 11.

[fkunecke]

I ran into this issue when I had no className='section' children in ReactFullpage.Wrapper. It appears to be a requirement to have at least one child of ReactFullpage with className containing section. Without that, this and other errors occur.

[alvarotrigo]

Yeah, its a requirement.

[CyberSecDemon]

Just an update for anyone that sees this in the future.

Framer Motion was installed. After removing Framer Motion & reinstalling NPM on Rosetta 2 this resolved itself.

[abdessamadely]

For me, I'm using a static express server to server uploads files on the development

So it happens when I wasn't running that server, I think it's due to some kind of proxy when trying to forward the request to that offline server

So I just had to run it and everything working as in development