Reagieren Sie auf die App-Komponente, „Modul nicht gefunden“, Importe und Pfade sind jedoch alle korrekt ⇐ C#

[Guest]

Der fragliche mysteriöse Fehler:

Code: Select all

ERROR in ./src/App.tsx 8:0-49
Module not found: Error: Can't resolve './Components/ItemShop' in 'C:\Users\Evan Newman\Desktop\Github Repos\DnD-ecommerce\dndecommerce-frontend\src'

Ein Screenshot, der zeigt, wo die Dateien relativ zueinander sind
Code aus der App-Komponente:

Code: Select all

import React from "react";
import "./App.css";
// import DisplayDagger from "./Components/DisplayDagger";
import "bootstrap/dist/css/bootstrap.min.css";
import { ItemShop } from "./Components/ItemShop";

function App() {
return (



);
}

export default App;

Code aus der importierten ItemShop-Komponente:

Code: Select all

import React, { useState, useEffect } from "react";
import { FaShoppingCart, FaCoins, FaWeight, FaDungeon } from "react-icons/fa";
import { GiDaggers } from "react-icons/gi";

interface DamageType {
index: string;
name: string;
url: string;
}

interface Damage {
damage_dice: string;
damage_type: DamageType;
}

interface Cost {
quantity: number;
unit: string;
}

interface EquipmentCategory {
index: string;
name: string;
url: string;
}

interface Property {
index: string;
name: string;
url: string;
}

interface DndItem {
index: string;
name: string;
equipment_category: EquipmentCategory;
weapon_category?: string;
weapon_range?: string;
category_range?: string;
cost: Cost;
damage?: Damage;
range?: {
normal: number;
long?: number;
};
weight: number;
properties?: Property[];
throw_range?: {
normal: number;
long: number;
};
url: string;
}

const ItemShop: React.FC = () => {
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const fetchItems = async () => {
try {
const response = await fetch("https://www.dnd5eapi.co/api/equipment");
const data: { results: { index: string; url: string }[] } =
await response.json();

// Fetch detailed information for each item
const itemDetails = await Promise.all(
data.results.slice(0, 6).map(async (item) => {
const detailResponse = await fetch(
`https://www.dnd5eapi.co${item.url}`
);
return detailResponse.json() as Promise;
})
);

setItems(itemDetails);
setLoading(false);
} catch (err) {
setError("Failed to fetch items");
setLoading(false);
}
};

fetchItems();
}, []);

const addToCart = (item: DndItem) => {
// TODO: Implement cart functionality
console.log(`Added ${item.name} to cart`);
};

if (loading)
return (


Loading items...


);

if (error)
return (

{error}

);

return (





Magical Marketplace




{items.map((item) =>  (





{item.name}





[b]Cost:[/b] {item.cost?.quantity}{" "}
{item.cost?.unit}


[b]Weight:[/b] {item.weight} lbs

{item.equipment_category && (


[b]Category:[/b] {item.equipment_category.name}

)}
{item.damage && (

[b]Damage:[/b] {item.damage.damage_dice}{" "}
{item.damage.damage_type.name}

)}
{item.properties && item.properties.length > 0 && (

[b]Properties:[/b]

{item.properties.map((prop) => (

{prop.name}

))}


)}

 addToCart(item)}
>

Add to Cart




))}


);
};

export default ItemShop;

Fazit
Dies ist eher ein seltsames als ein kompliziertes Problem. Das Problem ist sehr einfach; Die App-Komponente kann die ItemShop-Komponente nicht finden, obwohl der Pfad korrekt ist. Gibt es ein zugrunde liegendes Problem, das ich übersehe?