Aquí está mi código: he intentado reorganizar las declaraciones de importación y también he intentado usar; exportar TinderCards const en comparación con el uso de, exportar TinderCards predeterminados;

MIS TINDERCARDS.JS

 import React, { useEffect, useState } from "react"; import TinderCard from "react-tinder-card"; import database from "./firebase"; const TinderCards = () => { const [people, setPeople] = useState([]); useEffect(() => { const unsubscribe = database .collection("people") .onSnapshot((snapshot) => setPeople(snapshot.docs.map((doc) => doc.data())) ); return () => { unsubscribe(); }; }, []); return ( <div> <h1>Tinder Cards</h1> <div className="tinderCards__cardContainer"> {people.map((person) => ( <TinderCard className="swipe" key={person.name} preventSwipe={["up", "down"]} > <div style={{ backgroundImage: `url(${person.url})` }} className="card" > <h3>{person.name}</h3> </div> </TinderCard> ))} </div> </div> ); }; export default TinderCards;

He intentado ajustar la declaración de exportación en vano; Creo que mis declaraciones de importación son todas correctas.

MI APLICACIÓN.JS

 import React from "react"; import { BrowserRouter as Router, Routes, Link, Route } from "react-router-dom"; import "./App.css"; import Header from "./components/Header"; import SwipeButtons from "./components/SwipeButtons"; import TinderCards from "./components/TinderCards"; const App = () => { return ( <div className="App"> <Header /> <Router> <Routes> <Route path="/" element={<TinderCards />} /> <Route path="/" element={<SwipeButtons />} /> </Routes> </Router> </div> ); }; export default App;