1

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.

2
  • So the file: C:\Users\brand\Desktop\files\js\react\project3\contactmanager\node_modules\react-scripts\node_modules\babel-loader\lib\index.js exists?
    – Jonathan
    Nov 5, 2018 at 14:35
  • Try doing an npm install after deleting the node_modules folder
    – Adarsh
    Nov 5, 2018 at 15:11

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.