Ошибка “Модуль React не найден” при импорте компонента addColor

Я работаю над проектом на React для задания в университете, и сталкиваюсь с ошибкой при попытке импортировать компонент addColor. Вот сообщение об ошибке, которую я получаю:

(изменено, чтобы включить полный текст ошибки)

Не удалось скомпилировать.

Модуль не найден: Ошибка: Невозможно разрешить './components/addColor' в '/my/base/path/my-app/src'
ОШИБКА в ./src/App.js 8:0-45
Модуль не найден: Ошибка: Невозможно разрешить './components/addColor' в '/my/base/path/my-app/src'

webpack скомпилирован с 1 ошибкой

(сообщение об ошибке в консоли 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 (горячая замена модуля: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

Эта ошибка возникает, как только я добавляю оператор импорта для компонента addColor в мой файл App.js. Приложение работает корректно, когда я убираю этот импорт и использование компонента.

Вот мои файлы App.js и компонентов

(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>Это мой список цветов</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>Цвета не отображаются.</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} звезд из 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="Добавьте название цвета"
                value={title}
                onChange = {(e) => setTitle(e.target.value)}
                required
                />
                <input type="color"
                value={color}
                onChange = {(e) => setColor(e.target.value)}
                required/>
                <button>Добавить цвет</button>

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

Структура моего проекта выглядит следующим образом:

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

Я подтвердил, что файл addColor.jsx существует в папке components. Остальные компоненты в той же папке импортируются правильно.

Что может быть причиной этой ошибки “Модуль не найден” и как я могу ее исправить?

Я думаю, что ошибка связана с тем, как вы импортируете файлы, или может быть опечатка в том, как вы их импортируете.

Я воссоздал ваш код здесь или просто посетите:

https://codesandbox.io/p/sandbox/nlctmn

Код работает нормально, и ошибок нет.

Я предлагаю вам изменить color-data.json на color-data.js и экспортировать ваши цвета таким образом, потому что вы итерируете color-data с помощью .map().

Я также предлагаю вам очистить кеш перед перезапуском приложения.

npm cache clean --force или yarn cache clean

а затем,

npm start или yarn start

Похоже, что ваш компонент addColor имеет расширение tsx, а не jsx на основе вашей структуры.

Какое расширение вы используете сейчас? Если ваш текущий файл – это addColor.tsx, то вы можете заменить его на addColor.jsx.