TypeError: Object(...) is not a function reactjs

Question

I was trying to clean up this react component by extracting fillCalendar() from being a method of the component into it's own js file and importing it instead. Originally this.state.datesArray was set in a componentWillMount() lifecycle method. Now I'm trying to directly initialize it inside the constructor because this is what the react docs recommends. Doing it this way now throws a "TypeError: Object(...) is not a function" error and I don't know why. Here is what Calendar.js use to look like see here.

Calendar.js

import React, { Component } from 'react';
import { fillCalendar } from '../calendar.tools'

class Calendar extends Component {
  constructor(props) {
    super(props)
    this.state = {
      datesArray: fillCalendar(7, 2018),
      date: new Date(),
      monthIsOffset: false,
      monthOffset: new Date().getMonth(),
      yearOffset: new Date().getFullYear()
    }
  }
  render() {
    return (
      ...
    )
  }
}

calendar.tools.js

let fillCalendar = (month, year) => {
  let datesArray = []
  let monthStart = new Date(year,month,1).getDay()
  let yearType = false;
  let filledNodes = 0;
  // Check for leap year
  (year%4 === 0) ? 
    (year%100 === 0) ?
      (year%400) ? yearType = true : yearType = false : 
    yearType = true : 
  yearType = false
  const monthArrays = yearType ? [31,29,31,30,31,30,31,31,30,31,30,31] : [31,28,31,30,31,30,31,31,30,31,30,31]
  if (month === 0) { month = 12; }
  let leadDayStart = monthArrays[month-1] - monthStart + 1
  // Loop out lead date numbers
  for (let i = 0; i < monthStart; i++) {
    datesArray.push({date: leadDayStart, type: "leadDate", id: "leadDate" + i})
    leadDayStart++
    filledNodes++
  }
  if (month === 12) { month = 0; }
  // Loop out month's date numbers
  for (let i = 0; i < monthArrays[month]; i++) {
    datesArray.push({date: i + 1, type: "monthDate", id: "monthDate" + i})
    filledNodes++
  }
  // fill the empty remaining cells in the calendar
  let remainingNodes = 42 - filledNodes;
  for (let i = 0; i < remainingNodes; i++) {
    datesArray.push({date: i + 1, type: "postDate", id: "postDate" + i})
  }
  return datesArray
}

Answer 1

It looks fine, you just have to export your function that's it.

use

export let fillCalendar = (month, year) => {

instead of

let fillCalendar = (month, year) => {

Answer 2

Just putting it out there....

I saw this error because I imported a function from the wrong module!

But I'm sure you'd never do that ;-)

(obviously a bit unlucky in that the function I imported had a common name - useParams in my case)

Answer 3

In addition to the accepted answer, I have observed that this error more generally occurs when the module/object being imported doesn't exist. I experienced it while trying to import a component of a library that had since removed the component. In my case, the specific component was FirebaseRealTimeSaga that is no longer available in the React Admin Firebase package

Answer 4

I also got object(...) is not a function. The reason was I was importing useSelector from react instead of importing from react-redux. Found out after half an hour of continuous state.

Answer 5

Example for Higher Order Component

Export function directly from after declaration

export default function Authorized(WrappedComponent) {

}

Answer 6

Accidentally invoking my exported function led to the same error.

// Bad! The () invokes the getFaq function.
export default getFaq();

"Object(…) is not a function"

// Good! getFaq is not invoked.
export default getFaq;

Answer 7

Hello everyone so I encountered the same issue of Object(...) is not a function. ( In build environment ) if it's working for you in dev but not build this is the solution.

It turns out that for my case I was using react Hooks: useState,useContext... from a development version of react

import { useContext } from 'react/cjs/react.development';

this line is what's causing the issue simply change it to :

import { useContext } from 'react';

and that will solve the issue problem.

Answer 8

When I tried to utilize hooks (specifically: useState()) with an older version of react in one of the projects worked on, I got the same error.

Based on dependencies into package.json I had it version 16.2.0 of react.

In my case this error happened because Hooks are used starting from: React 16.8

Below I describe the situation also with a screenshoot.

Answer 9

I encountered the"Object(…) is not a function" error due to an incorrect file extension.

Adding ".js" to the file extension resolved this error.

Answer 10

If all else looks okay, make sure your file that you are exporting from is actually saved with your latest changes.

This error commonly does occur because you aren't actually importing the function. I validated that I was exporting my function properly and importing it properly, among all other general "gotchas".

It was only after thirty minutes of analysis that I realized I didnt actually Save the file that contained the newly added export code! So indeed, the function wasn't importing - but not due to code error, but due to human/IDE issue. I simply forgot to hit Ctrl+S and never noticed the "unsaved changes" dot on my file in Visual Studio Code.

Sounds obvious - but I know this will help others like me who may have missed the obvious.

Answer 11

I also got object(...) is not a function. The reason was I was importing useSelector from react instead of importing from react-redux. Found out after half an hour of continuous state. I hope you will not do this mistake

Answer 12

you will have to import fillCalendar like this.

import fillCalendar from '../calendar.tools'

so you have to remove curly brackets in import statement.