Here is the sandbox link: https://codesandbox.io/s/playvideo-e3dbw
I'm using video.js to display video in my react project, and it's imported in my <VideoPlayer/>
component.
Now I want to use react-loadable
to wrap <VideoPlayer/>
cause video.js is too large.
But when I'm accessing the actural video player in my running project, the project was crashed and I got some error messages in my browser's console:
react-dom.development.js:57 Uncaught Invariant Violation: Element type is
invalid: expected a string (for built-in components) or a class/function (for
composite components) but got: object.
Check the render method of `LoadableComponent`.
Warning: Can't perform a React state update on an unmounted component. This is
a no-op, but it indicates a memory leak in your application. To fix, cancel
all subscriptions and asynchronous tasks in the componentWillUnmount method.
Here are some pieces of my source codes. The problem occurs after I wrapped <VideoPlayer/>
component using react-loadable
like so:
const LoadableVideoPlayer = Loadable({
loader: () => import('./VideoPlayer'),
render(loaded, props) {
let Component = loaded.default;
return <Component {...props}/>;
},
loading: <div>Loading...</div>
});
I want to render either pdf player or video player in a page according to current state. Here is the usage of <LoadableVideoPlayer/>
component:
if (this.state.currentPlayer==='Video' && videoSrc) {
return <LoadableVideoPlayer key={videoSrc} videoSrc={videoSrc}/>
} else if (this.state.currentPlayer==='PDF' && pdfSrc) {
return <PDFPlayer key={pdfSrc} pdfSrc={pdfSrc}/>
}
}
This is my <VideoPlayer/>
component:
import React from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
class VideoPlayer extends React.Component {
componentDidMount() {
const src = this.props.videoSrc;
const videoPlayerOptions = {
controls: true,
sources:[
{
src:src,
type:'video/mp4'
}
]
};
this.player = videojs(this.videoNode, videoPlayerOptions, () => {
console.log("Ready to play")
})
}
componentWillUnmount() {
// if (this.player) {
// this.player.dispose()
// }
}
render() {
return(
<div data-vjs-player style={{width:'100%'}}>
<video ref={node => this.videoNode = node} className="video-js" />
</div>
)
}
}
export default VideoPlayer
Please notice that in componentWillUnmount()
method I comment out those lines of code, since if not, I will get another error message even if I do not use react-loadable
.
I think the problem might be here, but I searched a lot and didn't find any solutions.
For more details, here are where I import Loadable and use it.
import React from 'react';
import Loadable from 'react-loadable';
import PDFPlayer from './PDFPlayer';
const LoadableVideoPlayer = Loadable({
loader: () => import('./VideoPlayer'),
render(loaded, props) {
let Component = loaded.default;
return <Component {...props}/>;
},
loading: <div>Loading...</div>
});
class ResourcePlayer extends React.Component {
state = {currentPlayer:'PDF'};
onPlayerChange = selectedPlayer => {
this.setState({currentPlayer:selectedPlayer})
};
renderPlayer = () => {
const {videoSrc, pdfSrc} = this.props;
if (this.state.currentPlayer==='Video' && videoSrc) {
return <LoadableVideoPlayerkey={videoSrc} videoSrc={videoSrc}/>
} else if (this.state.currentPlayer==='PDF' && pdfSrc) {
return <PDFPlayer key={pdfSrc} pdfSrc={pdfSrc}/>
} else {
return (
<div>
{/*Some placeholder here, not important for this problem*/}
</div>
)
}
};
render () {
// suppose here are some logic to switch the state between 'PDF' and 'Video'
return (
{this.renderPlayer()}
)
}
}