javascript - Bundle.js 无法识别我的文件之一？

Question

请耐心等待，因为我是一个 javascript 新手，刚刚开始学习 React。

我正在尝试制作一个小型应用程序，但我不断收到错误，提示找不到我的文件之一......具体是这样的:

bundle.js:56 未捕获错误:找不到模块“./components/search_bar”

我的文件结构是，我的index.js位于名为src的文件夹中，然后我的搜索栏(search_bar.js)位于名为components的文件夹中。我已经对它们的拼写进行了三次检查，但我仍然收到此错误。

这是我的index.js

import SearchBar from './components/search_bar';
import React from 'react';
import ReactDOM from 'react-dom';
//Create a componant (some /HTML)

const API_KEY = 'AIzaSyC3Z3qTpvAacDLYEIxaueKflFJbWvdIHsw';

  const App = () => {
    return (
     <div>
      <SearchBar />
     </div>
   );
  }

// Put that componant on the page (the DOM)

ReactDOM.render(<App />, document.querySelector('.container'));

这是我的 search_bar.js

import React, { Component } from 'react';

class SearchBar extends Component {
  contructor(props) {

    super(props);
    // when user updates the search bar this term will get updated.
    this.state = { term: ''};

  }

  render() {
    //update state
    //use set state everywhere besides constructor!!
    return (
      <div>
      <input onChange={event => this.setState({term: event.target.value})} 
/>
      Value of the input: {this.state.term}
      </div>
    );
  }

}


export default SearchBar;

关于我在这里做错了什么有什么想法吗？

Answer 1

您能确认以下目录结构吗？

my_project/src/index.js

my_project/src/components/search_bar.js

您当前的目录结构似乎可能如下所示: my_project/src/index.js、my_project/components/search_bar.js