Triangle spinner Component its broken.

[weillercarvalho]

When I pass this code in a React App created in Vite the Spinner don't render and the application breaks:
The code:

import { Triangle } from "react-loader-spinner";

export function Spinner() {
  return (
    <Triangle
      height="80"
      width="80"
      color="#4fa94d"
      ariaLabel="triangle-loading"
      wrapperStyle={{}}
      wrapperClassName=""
      visible={true}
    />
  );
}

The error:

Uncaught TypeError: dispatcher is null

The above error occurred in the <styled.svg> component:

O@http://localhost:5173/node_modules/.vite/deps/react-loader-spinner.js?t=1679623477709&v=32b9be25:3878:6
div
Triangle@http://localhost:5173/node_modules/.vite/deps/react-loader-spinner.js?t=1679623477709&v=32b9be25:4543:12
Spinner
RenderedRoute@http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bb418bfd:3029:7
Routes@http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bb418bfd:3373:7
Router@http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bb418bfd:3324:7
BrowserRouter@http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=bb418bfd:3734:7
App@http://localhost:5173/src/components/App.tsx?t=1679623508342:31:39

[weillercarvalho]

I already tested the others spinners components and its working fine, except the triangle one.

[wolfpixels]

I think the infinity one is broken too, breaks for me from using examples code

[weillercarvalho]

@isaacjoy97 yeah, I tested the infinity one and its broken too.

[mhnpd]

@weillercarvalho Which version of react-script you are using?

[weillercarvalho]

@mhnpd none, I'm using Vite not CRA

[weillercarvalho]

pck.jsn deps.

"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@mui/icons-material": "^5.11.11",
"@mui/material": "^5.11.11",
"axios": "^1.3.4",
"framer-motion": "^10.5.0",
"material-ui-popup-state": "^5.0.4",
"popmotion": "^11.0.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-loader-spinner": "^5.3.4",
"react-router-dom": "^6.8.2",
"react-toastify": "^9.1.1",
"recharts": "^2.4.3",
"styled-reset": "^4.4.5"
},
"devDependencies": {
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@vitejs/plugin-react-swc": "^3.0.0",
"sass": "^1.58.3",
"typescript": "^4.9.3",
"vite": "^4.1.0"
}

[MajdMaghamez]

tirangle is working for me but i found a minor bug when i copied the the code from the example the property responsible for setting the component class called wrapperClassName, when adding a class value to this property it was rendering "undefined" but if you change it to wrapperClass it worked this is the case for [ watch,, triangle, three dots ]