I use Create-React-App to build a small React application. The full code is stored in github

My file structure:

src
  ponents
    Players.js
    Player.js
App.css
App.js
index.css
index.js
...

App.js:

import React from 'react';
import './App.css';
import PropTypes from 'prop-types';// used to fix the error: 'PropTypes' is not defined
import Header from './ponents/Header';
import Players from './ponents/Players';

const App = (props) => (
  <div className="scoreboard">
    <Header title={props.title} />
    <Players />
  </div>
  );

App.propTypes = {
  title: PropTypes.string.isRequired
};


export default App;

Player.js:

import React from 'react';

const Player = (props) => (
  <div className="player">
    <div className="player-name">
      Jim Hoskins
    </div>
    <div className="player-score">
      <div className="counter">
        <button className="counter-action decrement"> - </button>
        <div className="counter-score">31</div>
        <button className="counter-action increment"> + </button>
      </div>
    </div>
  </div>
);

export default Player;

Players.js:

import React from 'react';
import Player from './ponents/Player';

const Players = () => (
  <div className="players">
    <div className="player">
      <div className="player-name">
        Jim Hoskins
      </div>
      <div className="player-score">
        <div className="counter">
          <button className="counter-action decrement"> - </button>
          <div className="counter-score">31</div>
          <button className="counter-action increment"> + </button>
        </div>
      </div>
    </div>
    <div className="player">
      <div className="player-name">
        Juan Li
      </div>
      <div className="player-score">
        <div className="counter">
          <button className="counter-action decrement"> - </button>
          <div className="counter-score">30</div>
          <button className="counter-action increment"> + </button>
        </div>
      </div>
    </div>
  </div>
)

export default Players;

And the line import Player from './ponents/Player'; leads to this error: But if I put this line on top of App.js file, it doesn't report such piling error. I really want to know what's the issue indeed with my code?

I use Create-React-App to build a small React application. The full code is stored in github

My file structure:

src
  ponents
    Players.js
    Player.js
App.css
App.js
index.css
index.js
...

App.js:

import React from 'react';
import './App.css';
import PropTypes from 'prop-types';// used to fix the error: 'PropTypes' is not defined
import Header from './ponents/Header';
import Players from './ponents/Players';

const App = (props) => (
  <div className="scoreboard">
    <Header title={props.title} />
    <Players />
  </div>
  );

App.propTypes = {
  title: PropTypes.string.isRequired
};


export default App;

Player.js:

import React from 'react';

const Player = (props) => (
  <div className="player">
    <div className="player-name">
      Jim Hoskins
    </div>
    <div className="player-score">
      <div className="counter">
        <button className="counter-action decrement"> - </button>
        <div className="counter-score">31</div>
        <button className="counter-action increment"> + </button>
      </div>
    </div>
  </div>
);

export default Player;

Players.js:

import React from 'react';
import Player from './ponents/Player';

const Players = () => (
  <div className="players">
    <div className="player">
      <div className="player-name">
        Jim Hoskins
      </div>
      <div className="player-score">
        <div className="counter">
          <button className="counter-action decrement"> - </button>
          <div className="counter-score">31</div>
          <button className="counter-action increment"> + </button>
        </div>
      </div>
    </div>
    <div className="player">
      <div className="player-name">
        Juan Li
      </div>
      <div className="player-score">
        <div className="counter">
          <button className="counter-action decrement"> - </button>
          <div className="counter-score">30</div>
          <button className="counter-action increment"> + </button>
        </div>
      </div>
    </div>
  </div>
)

export default Players;

And the line import Player from './ponents/Player'; leads to this error: But if I put this line on top of App.js file, it doesn't report such piling error. I really want to know what's the issue indeed with my code?

• javascript
• reactjs
• create-react-app

• 1 Not the reason for issue, but a little tip when creating modules, keep all module names lowercase it saves headaches later.. :) – Keith Commented Mar 19, 2018 at 15:33
• You'll get an error for your imports Header/Players in App.js as well since they are under /src/ponents and not just /ponents – iceveda06 Commented Mar 19, 2018 at 15:33
• @Keith I write ponent name with capital letter because it's suggested by the teacher from an online course. – juanli Commented Mar 19, 2018 at 15:35
• 1 Yes, write the ponent name in capitals, just not the module name. eg. import Players from './players'; If you look at NPM you will notice not many with capitals, the main reason is OS's treat case differently, and the consensus for safety, is just keep all module names lowercase. eg. in windows Player and player will refer to the same file, but will import as 2 separate modules, and if you have any module statics they will be duplicated. So get the case slightly wrong on another import, could potentially make for very hard to debug applications. – Keith Commented Mar 19, 2018 at 15:43
• @iceveda06 No error occurs because 'App.js' is sitting the same along with the directory as 'ponents' rather than 'src'. And as I'm just told that './' represent current directory. So ' import player from './ponents/player' works fine. Thanks for your ment anyway. – juanli Commented Mar 19, 2018 at 16:11

2 Answers 2

Your file path is wrong. Player is in the same folder as Players, so you need to just say import Player from './Player'

• Delete the node_modules directory
• Delete the package-lock.json file
• Run npm install
• Run npm start