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?
