React Module not found error when importing addColor component

I’m working on a React project for a university assignment and I’m encountering an error when trying to import the addColor component. Here’s the error message I’m getting:

(modified to include complete error message)

Failed to compile.

Module not found: Error: Can't resolve './components/addColor' in '/my/base/path/my-app/src'
ERROR in ./src/App.js 8:0-45
Module not found: Error: Can't resolve './components/addColor' in '/my/base/path/my-app/src'

webpack compiled with 1 error

(error message at console on chrome)

Uncaught Error: Cannot find module './components/addColor'
    at webpackMissingModule (bundle.js:19:50)
    at ./src/App.js (bundle.js:19:146)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at ./src/index.js (starRating.jsx:18:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:22:1)
    at startup:7:1
    at startup:7:1

This error occurs as soon as I add the import statement for the addColor component in my App.js file. The application works correctly when I remove this import and the usage of the component.

Here are my App.js file and component files

(src/App.js)

import React, { useState } from 'react';
import './App.css';
import colorObjList from './services/color-data.json';
import AddColor from './components/addColor';
import ColorList from './components/colorList';
import { v4 } from 'uuid';


function App() {
  const [colors, setColors] = useState(colorObjList);


  const handleDelete = (id) => {
    const newColors = colors.filter(color => color.id !== id)
    setColors(newColors);
  };

  const handleRating = (id, rating) => {
    const newColors = colors.map(color=>{
      if(color.id === id) {
        color.rating = rating
      }
      return color;
    });
    setColors(newColors);
  }

  const handleAddColor = (title, color) => {
    const colorObj = {
      id: v4(),
      title,color,rating:0
    }
    const newColors = [...colors, colorObj]
    setColors(newColors);
  }

  return (
    <div className="App">
      <h1>This is my Color List</h1>
      <AddColor handleSubmit={handleAddColor}/>
      <ColorList
      colors={colors}
      onDelete={handleDelete}
      onRate={handleRating}
      />
    </div>
  );
}

export default App;

(src/components/colorList.jsx)

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

const ColorList = ({colors, onDelete = f => f, onRate = f => f}) => {
    if (colors.length === 0 ) {
        return (<div><p>There are no colors display.</p></div>);
    }

    return (
        <div>
            {
                colors.map(color =>
                    <ColorElement
                    color={color}
                    onDelete={onDelete}
                    onRate={onRate}
                    />
                )
            }
        </div>
    );
}
 
export default ColorList;

(src/components/colorElement.jsx)

import React from 'react';
import {FaTrash} from 'react-icons/fa';
import StarRating from './starRating';

const ColorElement = ({color, onDelete = f => f, onRate = f => f}) => {
  return (
    <div>
      <h3>{color.title}</h3>
      <FaTrash onClick = {() => onDelete(color.id)}/>
      <div style={{height:50, backgroundColor: color.color}}/>
      <StarRating
      selectedStars={color.rating}
      onRate={(rating) => onRate(color.id, rating)}
      />
      <p>{color.rating} stars of 5</p>
    </div>
  );
}
 
export default ColorElement;

(src/components/starRating.jsx)

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

const StarRating = ({totalStars=5, selectedStars=0, onRate = f => f}) => {
    return (
        <>
        {
            [...Array(totalStars)].map((n, i) =><Star 
            index={i}
            isSelected={i < selectedStars}
            onRate={() => onRate(i+1)}
            />)
        }
        </>
    );
}
 
export default StarRating;

(src/components/star.jsx)

import React, { Component } from 'react';
import {FaStar} from 'react-icons/fa';

const Star = ({index, isSelected, onRate = f => f}) => {
    return (
        <>
        {
            <FaStar color={isSelected?"red":"gray"} onClick={onRate} />
        }
        </>
    );
}
 
export default Star;

(src/components/addColor.jsx)

import React, { useState } from 'react';

const AddColor = ({handleSubmit = f=> f}) => {
    const [title, setTitle] = useState("");
    const [color, setColor] = useState("#000000");
    const submit=(e) => {
        e.preventDefault();
        handleSubmit(title, color);
        setTitle("");
        setColor("#000000");
    }

    return (
        <div>
            <form onSubmit = {submit}>
                <input 
                type="text"
                placeholder="Add the color title"
                value={title}
                onChange = {(e) => setTitle(e.target.value)}
                required
                />
                <input type="color"
                value={color}
                onChange = {(e) => setColor(e.target.value)}
                required/>
                <button>Add Color</button>

            </form>
        </div>
    );
}
 
export default AddColor;

My project structure looks like this:

src
├── App.js
├── components
│   ├── addColor.tsx
│   ├── colorElement.jsx
│   ├── colorList.jsx
│   ├── star.jsx
│   └── starRating.jsx
...

I’ve confirmed that the addColor.jsx file exists in the components folder. The other components in the same folder are importing correctly.

What could be causing this "Module not found" error, and how can I resolve it?

You need to sign in to view this answers