React and hooks - Getting TypeError: Object(...) is not a function

Question

I'm using Mapbox to try to render various coordinates from a local JSON file.

However, I'm receiving the error TypeError: Object(...) is not a function. I've looked up some info on what could be causing it (e.g. earlier versions of react won't work with hooks), but since it's pretty vague I don't know how to diagnose it properly.

I have a component that's using React hooks and I believe it's responsible for the error. I can't tell if one of my packages is out of date, if it's with the way the function is written/set up/etc, or if it's something else.

Here's a JS Fiddle showing the complete Component code: https://jsfiddle.net/bsp7q839/

package.json:

"dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-map-gl": "^5.2.3",
    "react-mapbox-gl": "^4.8.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "reactstrap": "^8.4.1",
    "sass": "^1.26.1"
  },

Component.js:

import React, { useState, useEffect } from 'react';
import ReactMapGL, { Marker, Popup } from "react-map-gl";
import * as crimeData from "../data/casefile-json.json";

export default function CrimeMap() {
  const [viewport, setViewport] = useState({
    // latitude, longitude, etc
  })

  const [selectedLocation, setSelectedLocation] = useState(null);

  useEffect(() => {
    const listener = (e) => {
      if (e.key === 'Escape') {
        setSelectedLocation(null);
      }
    };
    window.addEventListener("keydown", listener);

    return () => {
      window.removeEventListener("keydown", listener)
    }
  }, [])

// etc

App.js:

import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";

import Header from "./components/Header.js";
import CrimeMap from "./components/CrimeMap.js";

import './App.css';

function App() {
    return (
     <BrowserRouter>
      <div className="App">
        <Header />
        <CrimeMap />
          <Switch>
            <Route path="/crime_map" component={CrimeMap} exact />

          </Switch>  
          {/* <Footer /> */}
      </div>
     </BrowserRouter>
    )
} 

export default App;

JSON snippet:

{
  //
  "fields": [
    {
      "name": "FID",
      "type": "esriFieldTypeOID"
    }
  ],
  "cases": [
    {
      "attributes": {
        "CaseNumber": 1,
        "CaseName": "The Wanda Beach Murders",
        "Episode Date (M/D/Y)": "1/9/2016",
        "Length of Case": "1:14:02",
        "Researched by": "Anonymous Host",
        "CountryOfCrime": "Australia",
        "StateOfCrime": "New South Wales",
        "CityOfCrime": "Sydney"
        },
        "geometry": {
          "x": -33.868820,
          "y": 151.209290
        }
      },

score 0 · Answer 1 · answered Mar 08 '20 at 00:58

You should be able to click on the error in your browser's console and that should take you to the file/line where the error is occurring.

For example, above is the error I'm getting in the jsfiddle you provided, (index):32 can be clicked on. This will show you the place where your error is originating.

It looks like an object is being used as a function here, and that surely fails. Try console.logging some values that you see on the line of the error. That could be, say, useState, and if it's undefined, then you need to upgrade your React npm package.

React and hooks - Getting TypeError: Object(...) is not a function

1 Answers1