找不到模块：无法解析“.../score-board-app/src/components”中的“./components/player”

Question

我使用 Create-React-App 构建一个小型 React 应用程序。完整代码存储在github

我的文件结构：

src
  components
    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 './components/Header';
import Players from './components/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 './components/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;

而行 import Player from './components/Player'; 导致此错误：但是如果我把这一行放在 App.js 文件的顶部，它不会报告这样的编译错误。我真的很想知道我的代码确实有什么问题？

Answer 1

你的文件路径有误。 Player 与 Players 在同一个文件夹中，因此您只需要说 import Player from './Player'

Answer 2

删除node_modules目录
删除包-lock.json文件
运行 npm 安装
运行 npm 开始

找不到模块：无法解析“.../score-board-app/src/components”中的“./components/player”

Module not found: Can't resolve './components/player' in '.../score-board-app/src/components'

javascript

reactjs

create-react-app