El error que estoy recibiendo:
ERROR in ./src/components/Loading.jsx 9:33-39 export 'default' (imported as 'Loader') was not found in 'react-loader-spinner' (possible exports: Audio, BallTriangle, Bars, Circles, CradleLoader, Grid, Hearts, MutatingDots, Oval, Plane, Puff, RevolvingDot, Rings, TailSpin, ThreeDots, Triangle, Watch)Aquí está mi código:
import React from 'react'; import Loader from 'react-loader-spinner'; export const Loading = () => ( <div className="flex justify-center items-center "> <Loader type="Puff" color="#00BFFF" height={550} width={80} /> </div> );react-loader-spinner exporta varios cargadores y puede usarlos directamente. Y si quieres importar todos los cargadores y usarlos. Puedes hacerlo así.
import * as Loader from "react-loader-spinner"; function App() { return <Loader.TailSpin />; }o
import {TailSpin} from "react-loader-spinner"; function App() { return <TailSpin />; }https://codesandbox.io/s/hopeful-herschel-652kq?file=/src/index.js:70-168
Solo necesita importar el cargador específico que desee, ya que hay muchos de ellos que exportan react-loader-spinner . Por ejemplo, el siguiente código es para el cargador de Rings .
Todos los tipos de cargadores están aquí en la documentación oficial.
import { Rings } from 'react-loader-spinner'; export const Loading = () => ( <div className="flex justify-center items-center "> <Rings color="#00BFFF" height={80} width={80} /> </div> );