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'
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: 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;
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?