Getting “Cannot call a class as a function” in my React Project

Getting “Cannot call a class as a function” in my React Project

I’m trying to add a React map component to my project but run into an error. I’m using Fullstack React’s blog post as a reference. I tracked down where the error gets thrown in google_map.js line 83:
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError(“Cannot call a class as a function”);
}
}

Here is my map component so far. The page loads just fine (without a map) when I comment out lines 58-60, the last three lines. edit: I made the changes that @Dmitriy Nevzorov suggested and it still gives me the same error.
import React from ‘react’
import GoogleApiComponent from ‘google-map-react’

export class LocationsContainer extends React.Component {
constructor() {
super()
}
render() {
const style = {
width: ‘100vw’,
height: ‘100vh’
}
return (

)
}
}

export class Map extends React.Component {
componentDidUpdate(prevProps, prevState){
if (prevProps.google !== this.props.google){
this.loadMap();
}
}
componentDidMount(){
this.loadMap();
}
loadMap(){
if (this.props && this.props.google){
const {google} = this.props;
const maps = google.maps;

const mapRef = this.refs.map;
const node = ReactDOM.findDOMNode(mapRef);

let zoom = 14;
let lat = 37.774929
let lng = 122.419416
const center = new maps.LatLng(lat, lng);
const mapConfig = Object.assign({}, {
center: center,
zoom: zoom
})
this.map = new maps.Map(node, mapConfig)
}
}
render() {
return (

Loading map…

)
}
}

export default GoogleApiComponent({
apiKey: MY_API_KEY
})(LocationsContainer)

And here is where this map component gets routed in main.js:
import {render} from ‘react-dom’;
import React from ‘react’;
import Artists from ‘./components/Artists’
import { Router, Route, Link, browserHistory } from ‘react-router’
import Home from ‘./components/HomePage’
import Gallery from ‘./components/ArtGallery’
import ArtistPage from ‘./components/ArtistPage’
import FavsPage from ‘./components/FavsPage’
import LocationsContainer from ‘./components/Locations’

//Create the route configuration
render((








), document.getElementById(‘app’))

Solutions/Answers:

Solution 1:

For me it happened when I forgot to write extends React.Component at the end.
I know it’s not exactly what YOU had, but others reading this answer can benefit from this, hopefully.

Solution 2:

tl;dr

If you use React Router v4 check your <Route/> component if you indeed use the component prop to pass your class based React component!

More generally: If your class seems ok, check if the code that calls it doesn’t try to use it as a function.

Explanation

I got this error because I was using React Router v4 and I accidentally used the render prop instead of the component one in the <Route/> component to pass my component that was a class. This was a problem, because render expects (calls) a function, while component is the one that will work on React components.

So in this code:

<HashRouter>
    <Switch>
        <Route path="/" render={MyComponent} />
    </Switch>
</HashRouter>

The line containing the <Route/> component, should have been written like this:

<Route path="/" component={MyComponent} />

It is a shame, that they don’t check it and give a usable error for such and easy to catch mistake.

Solution 3:

For me it was because I forgot to use the new keyword when setting up Animated state.

eg:

fadeAnim: Animated.Value(0),

to

fadeAnim: new Animated.Value(0),

would fix it.

Solution 4:

Happened to me because I used

PropTypes.arrayOf(SomeClass)

instead of

PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))

Solution 5:

You have duplicated export default declaration. The first one get overridden by second one which is actually a function.

Solution 6:

I experienced the same issue, it occurred because my ES6 component class was not extending React.Component.