The error I'm getting:
ERROR in ./src/ponents/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)
Here is my code:
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>
);
The error I'm getting:
ERROR in ./src/ponents/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)
Here is my code:
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>
);
Share
Improve this question
edited Jun 7, 2022 at 19:28
Youssouf Oumar
46.1k16 gold badges100 silver badges104 bronze badges
asked Feb 4, 2022 at 18:10
Anurag singhAnurag singh
1171 gold badge2 silver badges7 bronze badges
1
- npmjs./package/react-loader-spinner check their documentation. the available spinnerTypes are provided there. – Sandrin Joy Commented Feb 4, 2022 at 18:37
4 Answers
Reset to default 8react-loader-spinner
exports various loaders and you can use those loaders directly. And if you want to import all the loaders and use them. You can do it like this.
import * as Loader from "react-loader-spinner";
function App() {
return <Loader.TailSpin />;
}
or
import {TailSpin} from "react-loader-spinner";
function App() {
return <TailSpin />;
}
https://codesandbox.io/s/hopeful-herschel-652kq?file=/src/index.js:70-168
You just need to import that specific loader you want, as there are many of them that react-loader-spinner
exports. For example the code below is for Rings loader.
All loader types are here on the official documentation.
import { Rings } from 'react-loader-spinner';
export const Loading = () => (
<div className="flex justify-center items-center ">
<Rings color="#00BFFF" height={80} width={80} />
</div>
);
You can import specific one from react-loader-spinner
import React from 'react'
import {Triangle} from 'react-loader-spinner'
const Loading = () => {
return (
<div className='flex justify-center items-center'>
<Triangle type='Puff' color='#00BFFF' height={550} width={80} />
</div>
)
}
export default Loading
https://mhnpd.github.io/react-loader-spinner/ Here you can find many examples of Loaders
make sure use the correct method of import and Export ,It Normally occurs because false Way of importing and exporting
Use this for Making and Importing the Loader Here we are targeting the specific loader from react-loader-spinner
import React from 'react';
import { Rings } from 'react-loader-spinner';
export const Loading = () => (
<div>
<Rings color="#00BFFF" height={80} width={80} />
</div>
);
See carefully that we don't use default Here so to import in main ponent
import {Loading} from './Loading.jsx';