KyleAMathews / react-spinkit

A collection of loading indicators animated with CSS for React
http://kyleamathews.github.io/react-spinkit/
MIT License
1.49k stars 73 forks source link

Error: ’Spinner’ only refers to a type, but is being used as a value here. #68

Open coventry opened 6 years ago

coventry commented 6 years ago

I'm getting the above error, trying to use this package with typescript.

Here's an example of a file, spin.tsx, where I get the error:

import * as React from 'react';
import { Spinner } from 'react-spinkit'

export const MySpinner = () => <Spinner name="circle" />

And here are the relevant portions of my package.json:

{
  "name": "my package",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "enzyme": "^3.3.0",
    "immutable": "^3.8.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-modal": "^3.5.1",
    "react-scripts-ts": "2.16.0",
    "react-spinkit": "^3.0.0",
    "redux": "^4.0.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "tslint --project . && react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "*",
    "react-test-renderer": "^16.4.1",
    "@types/jest": "^23.1.5",
    "@types/node": "^10.5.2",
    "@types/react": "^16.4.6",
    "@types/react-dom": "^16.0.6",
    "@types/react-spinkit": "^3.0.0",
    "typescript": "^2.9.2"
  }
}
alukach commented 6 years ago

Importing via import * as Spinner from 'react-spinkit' resolved this issue for me.

alexisInowuDev commented 3 months ago

var Spinner = require('react-spinkit');

this fixed it for me