title: Module not found: Can't resolve './components/player' in '.../score-board-app/src/components'
body: <p>I use Create-React-App to build a small React application. The full code is stored in <a href="https://github.com/juan-coding/score-board-app" rel="nofollow noreferrer">github</a></p>
  
  <p>My file structure: </p>
  
  <pre><code>src
    components
      Players.js
      Player.js
  App.css
  App.js
  index.css
  index.js
  ...
  </code></pre>
  
  <p><em>App.js:</em></p>
  
  <pre><code>import React from 'react';
  import './App.css';
  import PropTypes from 'prop-types';// used to fix the error: 'PropTypes' is not defined
  import Header from './components/Header';
  import Players from './components/Players';
  
  const App = (props) =&gt; (
    &lt;div className="scoreboard"&gt;
      &lt;Header title={props.title} /&gt;
      &lt;Players /&gt;
    &lt;/div&gt;
    );
  
  App.propTypes = {
    title: PropTypes.string.isRequired
  };
  
  
  export default App;
  </code></pre>
  
  <p><em>Player.js:</em></p>
  
  <pre><code>import React from 'react';
  
  const Player = (props) =&gt; (
    &lt;div className="player"&gt;
      &lt;div className="player-name"&gt;
        Jim Hoskins
      &lt;/div&gt;
      &lt;div className="player-score"&gt;
        &lt;div className="counter"&gt;
          &lt;button className="counter-action decrement"&gt; - &lt;/button&gt;
          &lt;div className="counter-score"&gt;31&lt;/div&gt;
          &lt;button className="counter-action increment"&gt; + &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  
  export default Player;
  </code></pre>
  
  <p><em>Players.js:</em></p>
  
  <pre><code>import React from 'react';
  import Player from './components/Player';
  
  const Players = () =&gt; (
    &lt;div className="players"&gt;
      &lt;div className="player"&gt;
        &lt;div className="player-name"&gt;
          Jim Hoskins
        &lt;/div&gt;
        &lt;div className="player-score"&gt;
          &lt;div className="counter"&gt;
            &lt;button className="counter-action decrement"&gt; - &lt;/button&gt;
            &lt;div className="counter-score"&gt;31&lt;/div&gt;
            &lt;button className="counter-action increment"&gt; + &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="player"&gt;
        &lt;div className="player-name"&gt;
          Juan Li
        &lt;/div&gt;
        &lt;div className="player-score"&gt;
          &lt;div className="counter"&gt;
            &lt;button className="counter-action decrement"&gt; - &lt;/button&gt;
            &lt;div className="counter-score"&gt;30&lt;/div&gt;
            &lt;button className="counter-action increment"&gt; + &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
  
  export default Players;
  </code></pre>
  
  <p>And the line <code>import Player from './components/Player';</code> leads to this error: 
  <a href="https://i.stack.imgur.com/cEIJH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cEIJH.png" alt="enter image description here"></a>
  But if I put this line on top of <code>App.js</code> file, it doesn't report such compiling error. I really want to know what's the issue indeed with my code?  </p>