había creado el componente de la tarjeta y llamé a mi ProductPage.js después de eso, recibo un error como Uncaught DOMException: no se pudo ejecutar 'createElement' en 'Documento': el nombre de la etiqueta proporcionado ('/static/media/Card.c3b0a67ff849f2bda062.JS ') no es un nombre válido. inicialmente era div y cambié a la tarjeta después de eso, recibo el error anterior si cambié div, entonces funciona bien, ¿cómo puedo resolver este problema? Para referencia, encuentre la imagen adjunta.

y el código es así.

ProductPage.js

 import React, { useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import { getProductPage } from "../redux/actions"; import { useLocation } from "react-router-dom"; import getParams from "../utils/getParams"; import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader import { Carousel } from "react-responsive-carousel"; import Card from "../Components/Card.JS"; function ProductPage() { const dispatch = useDispatch(); const product = useSelector((state) => state.product); const { page } = product; const { search } = useLocation(); useEffect(() => { const params = getParams(search); console.log(params); const payload = { params, }; dispatch(getProductPage(payload)); }, []); return ( <div style={{ margin: "0 10px" }}> {page.title} <Carousel renderThumbs={() => {}}> {page.banners && page.banners.map((banner, index) => ( <a key={index} style={{ display: "block" }} href={banner.navigateTo} > <img src={banner.img} alt="" /> </a> ))} </Carousel> <div> {page.products && page.products.map((product, index) => ( <Card key={index}> <img src={product.img} alt="" /> </Card> ))} </div> </div> ); } export default ProductPage;

Tarjeta.js

 import React from "react"; import "./style.css"; function Card(props) { return <div className="card">{props.card}</div>; } export default Card;