React私のコンポーネントの不変違反エラー

Question

ReactJSを学習していて、Youtube APIデータをコンポーネントにレンダリングしようとすると、次の警告とエラーが発生します。私はそれらの背後にある原因は何かを理解しようとしていますが、何が起きているのかはわかりません。

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of App .

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 App .

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of App .

Error: 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 App .

Uncaught TypeError: Cannot read property 'props' of undefined

問題が発生しているコードは以下のとおりです。私はこれが私のAppコンポーネントと関係があり、私はどのように私の小道具オブジェクトをセットアップしたのかと確信していますが、問題の原因を突き止めることはできません。

index.js

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import SearchBar from './components/search_bar'; 
import YTSearch from 'youtube-api-search'; 
import VideoList from './components/video_list'; 

const API_KEY = "not showing the real key here for obvious reasons"; 

class App extends Component { 
    constructor(props){ 
     super(props); 

     this.state = {videos: []}; 

     YTSearch({key: API_KEY, term: 'sufboards'}, (videos) => { 
      this.setState({videos}); 
     }); 
    } 
    render(){ 
     return (
      <div> 
       <SearchBar /> 
       <VideoList videos={this.state.videos} /> 
      </div> 
     ); 
    } 
} 
ReactDOM.render(<App />, document.querySelector(".container")); 

video_detail.js

import React from 'react'; 

const VideoList = (props) => { 
    return (
     <ul className="col-md-4 list-group"> 
      {props.videos.length} 
     </ul> 
    ); 
}; 

export default VideoList; 

search_bar.js

import React, {Component} from 'react'; 

class SearchBar extends Component { 
    constructor(props){ 
     super(props); 
     this.state = {term: ""}; 
    } 

    render(){ 
     return (
      <input 
       onChange={ 
        event => this.setState({ 
         term: event.target.value 
        }) 
       } 
       value = {this.state.term} 
      /> 
     ); 
    } 
} 

export default SearchBar; 

Answer 1

簡単な修正：

import VideoList from './components/video_list';

ファイルが空だった、私のコードはので、私は多分そのため、無効なHTMLの、正しいファイルにvideo_list.js