JSreact子组件错误

我编辑的代码工作得很好，直到我添加了新的代码，使按钮点击工作从一个视频到另一个视频。我就是找不到错误，终端也不接收。

谁能告诉我为什么。/video_list_item.js不再被识别?

附加的是父组件和2个子组件，虽然我有5个总组件的错误肯定只在其中一个。

index.js

import React, {Component } from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search';
import SearchBar from './components/searchbar';
import VideoList from './components/video_list';
import VideoDetail from './components/video_detail';
const API_KEY = 'AIzaSyAi1CzVpifuFUDVQf3dzrTu3mwJDP2n8r8';
class App extends Component {
	constructor(props){
		super(props);
		//Do i expect this component to play any type of state? aka pass props
		this.state= { 
			videos: [],
			selectedVideo:null
		};
				  //  ^proper name can be anything
		YTSearch({key: API_KEY, term: 'surfboards'}, (videos) => {
//	console.log(data);
		this.setState({ videos:videos,
			selectedVideo: videos[0]
		 });
	});		// this.setState({videos : vidoos});  
}
	render (){
	return (
	<div>
		<SearchBar />
		<VideoDetail video={this.state.selectedVideo} />
		<VideoList 
		onVideoSelect={selectedVideo => this.setState({selectedVideo})  }
		videos={this.state.videos} /> 
            
	</div>
	 ); 
	}
}
ReactDOM.render(<App />, document.querySelector('.container'));

video_list.js

//video list file. JS.react
import React from 'react';
import VideoListItem from './video_list_item';
const VideoList = (props) => {
	//				^props is made args here because videos var is passed
	//				in index.js into VideoList function(with state).
const videoItems =	props.videos.map((video) => {
		return (
	<VideoListItem 
		onVideoSelect={props.onVideoSelect}
		key={video.etag} 
		video ={video} />
		); 
	});
	return (
		<ul className="col-md-4 list-group">
		{videoItems}
		</ul>
	);
	
};
export default VideoList;

video_list.item.js

//video list item file. JS.react
import React from 'react'; 
const VideoListItem = ({video, onVideoSelect}) => {
	const imageUrl = video.snippet.thumbnails.default.url;
	// can see this in console log 
	return (
	<li onClick={() => onVideoSelect{video} }className="list-group-item">
	<div className ="video-list media">
		<div className ="media-left">
		<img className="media-object" src = {imageUrl}/>
		</div>
		<div className="media-body"> 
		<div className="media-heading"> {video.snippet.title} </div>
		</div>
	</div>
	</li>
	);
};
export default VideoListItem; 

我可以发布我在开发工具中得到的错误信息，但它实际上只说了一件事。这是错误消息=>不能找到模块"./video_list_item"

同样，没有任何文件被移动，代码被编辑并创建了错误消息。感谢任何真诚回答这个问题的人!