ReactJS - тип элемента является недопустимой ошибкой

Question

У меня есть следующая ошибка с приведенным ниже кодом, однако я не могу определить, что не так с моим компонентом. Любая помощь приветствуется!

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 .

index.js

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import YTSearch from 'youtube-api-search'; // Used to interact with Youtube API 
import SearchBar from './components/search_bar'; // custom search bar component 
import VideoList from './components/video_list'; // custom youtube video list component 

const API_KEY = "key not shown here for privacy purposes"; 

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")); 

webpack.config.js

По просьбе JordanHendrix.

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel' 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

video_detail.js

В соответствии с просьбой bhargavponnapalli

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

В соответствии с просьбой bhargavponnapalli

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'; 

Файл был пуст, мой код был в video_detail.js так что мне пришлось перенести его в файл правильно, video_list.js