React module not found - Unable to resolve issue

Question

I am new to React and I'm getting this error. From the research I've done it seems like it should just be something with the file path, but I've checked mine and everything seems okay.

./src/components/Contacts.js Module not found: Can't resolve 'C:\Users\brand\Desktop\files\js\react\project3\contactmanager\node_modules\react-scripts\node_modules\babel-loader\lib\index.js' in 'C:\Users\brand\Desktop\files\js\react\project3\contactmanager'

My file layout is

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

The code for the 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;

Also, I used create-react-app to begin the project.

I've spent a little bit of time trying to figure this out so I hope it's not just a simple spelling mistake.

Answer 1

Check the code in contact.js looks like you forgot to close with a semicolon after importing 'React' from react.