未找到 React 模块 - 无法解决问题

Question

我是 React 新手，我遇到了这个错误。从我所做的研究来看，它似乎应该只是文件路径的东西，但我检查了我的，一切似乎都还好。

./src/components/Contacts.js 找不到模块：无法解析 'C:\Users\brand\Desktop\files\js\react\project3\contactmanager\node_modules\react-scripts\node_modules\babel-loader\lib\index.js' 在 'C:\Users\brand\Desktop\files\js\react\project3\contactmanager'

我的文件布局是

src/ 
 App.js  
 components/   
  Contact.js   
  Contacts.js  
  Header.js

Contacts.js 的代码

import React, { Component } from 'react'
import Contact from './Contact'; 

class Contacts extends Component {

    constructor(){
        super(); 
        this.state = {
            contacts:[
                {
                    id:1, 
                    name:'brandon', 
                    email:'b@gamil.com', 
                    phone:'555-555-5555'
                },
                {
                    id:2, 
                    name:'daphne', 
                    email:'d@gamil.com', 
                    phone:'555-555-5555'
                },
                {
                    id:3, 
                    name:'finn', 
                    email:'f@gamil.com', 
                    phone:'555-555-5555'
                }
            ]
        }
    }

  render() {
    const {contacts} = this.state; 

    return (
      <div>
        {contacts.map(contact=>(
            <Contact 
                name={contact.name}
                email={contact.email}
                phone={contact.phone}
            />
        ))}
      </div>
    )
  }
}

export default Contacts; 

Contact.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Contact extends Component {
  render() {
    const { name, email, phone } = this.props;

    return (
      <div className="card card-body mb-3">
        <h4>{name}</h4>
        <ul className="list-group">
          <li className="list-group-item">
            Email:
            {email}
          </li>
          <li className="list-group-item">
            Phone:
            {phone}
          </li>
        </ul>
      </div>
    );
  }
}

Contact.propTypes = {
  name: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
  phone: PropTypes.string.isRequired
};

export default Contact;

App.js

import React, { Component } from 'react';
import Header from './components/Header';
import Contacts from './components/Contacts'; 

import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header branding="Contact Manager" />
        <div className="container">
          <Contacts />
        </div>
      </div>
    );
  }
}

export default App;

另外，我使用 create-react-app 来开始这个项目。

我花了一点时间试图弄清楚这一点，所以我希望这不仅仅是一个简单的拼写错误。

Answer 1

检查 contact.js 中的代码，在从 react 导入“React”后，您似乎忘记用分号结束。