warning occur when use react-loadable-visibility,but react-loadable is ok

[0x457]

warning occur when use react-loadable-visibility,but using react-loadable is ok

package.json

    "react-loadable": "^5.5.0",
    "react-loadable-visibility": "^3.0.2",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",

using react-loadable is ok

import React from 'react';
import LoadableVisibility from 'react-loadable';

//通用的过场组件
const loadingComponent =()=>{
    return (
        <div>loading</div>
    )
}

//过场组件默认采用通用的，若传入了loading，则采用传入的过场组件
export default (loader,loading = loadingComponent)=>{
    return Loadable({
        loader,
        loading
    });
}

but react-loadable-visibility/react-loadable,warning happen

import React from 'react';
import LoadableVisibility from 'react-loadable-visibility/react-loadable'; //1

//通用的过场组件
const loadingComponent =()=>{
    return (
        <div>loading</div>
    )
}

//过场组件默认采用通用的，若传入了loading，则采用传入的过场组件
export default (loader,loading = loadingComponent)=>{
    return LoadableVisibility({ //2
        loader,
        loading
    });
}

[tazsingh]

Hmmmm that's an odd warning because we don't even have staticContext defined anywhere in this repo 🤔 It's certainly not in the file that the warning is referring to https://github.com/stratiformltd/react-loadable-visibility/blob/master/src/createLoadableVisibilityComponent.js

Are you able to reproduce this issue in a CodeSandbox or a repo that I can look at?

[rvntone]

I have exactly the same issue, I'm updating the react-router-dom package and it start give me that warning and the components don't load after that

[tazsingh]

Thanks @rvntone! Are you able to reproduce the issue in a CodeSandbox or a repo by any chance? As mentioned above, we don't actually reference staticContext at all, thus I'm a bit confused and a reproducible environment would very much help to debug

[lezan]

I have something similar, plus this kind of warning. I am trying to reproduce the issue in a sandobox.

Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: LoadableComponent

visibilityHandler createLoadableVisibilityComponent.js:52
intersectionObserver createLoadableVisibilityComponent.js:25
intersectionObserver createLoadableVisibilityComponent.js:21

Update 1:

I am still unable to reproduce it in a sandbox, meanwhile I try to switch from react-loadable-visibility with react react-loadable to just react-loadable. In this way I cut off all warnings of "React does not recognize..", but still It shows me one warning:

Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: LoadableComponent

Update 2:

@tazsingh Got it. Warnings are showed when when we use a camel case prop in our dynamic imported component.

Sandbox here.

Update 3: Some hints:

• Resource: https://reactjs.org/warnings/unknown-prop.html
• Could be here?
• Whell, it is the same issue.

[OrganicPanda]

I think this is because all of the props are spread on to the wrapper <div> https://github.com/stratiformltd/react-loadable-visibility/blob/master/src/createLoadableVisibilityComponent.js#L80, I'm not sure why you would want this to happen - maybe it is to support things like className?