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 ]