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
}

Filter

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) => {

Seamaid

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)

Erek

similar for me, but I was doing my import like a {named} import, when actually it was supposed to be a default inport – Malti

Same here - I had imported a React hook from "react/cjs/react.development" instead of "react". – Euhemerism

Answer 3

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.

Canicula

Answer 4

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

Hecate

@Théophile fixed – Hecate

Answer 5

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.

Quota

Answer 6

Example for Higher Order Component

Export function directly from after declaration

export default function Authorized(WrappedComponent) {

}

Gibun

Answer 7

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;

Zaporozhye

Answer 8

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.

Moyra

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.

Magneto

Answer 10

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

Stegman

Answer 11

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.

Officialdom

Answer 12

This error can also occur if you have a circular reference. Specifically if you are are importing some files directly, and other files from an 'index.js' type file that includes all the files in a directory.

This can be a real pain to try and debug, because the line on which the error occurs doesn't necessarily give you a good idea of where the problem is. Here is how I solved the situation for myself:

1. In Chrome Dev console place a debug breakpoint right before the line which is causing the error.
2. Reload the page and wait for the breakpoint to hit.
3. Hover you mouse cursor over the imported modules to inspect them.
4. If a module has been loaded previously, but it is incomplete, you will notice that the member properties on the imported variable stop abruptly.
5. Look at the source code for your 'index.js' file and compare the exports with the properties that were successfully imported (in the debugger). For example if your 'index.js' modules exports {a, b, c, d, e} and you notice the imported object only contains {a, b, c} in the debugger, then you know that the circular reference begins while trying to process the dependencies of d.

6. Dive into the code in the dependency you identified, e.g. 'd.js' and follow the dependency chain until you find a circular reference.

Once you find the circular reference you should be able to resolve it by changing your import statement to reference the previous index.js instead of a direct file. For example, in my case I fixed it by changing the following:

import {useBuildElement} from "../../Hooks/GenericModelHooks";

to:

import {useBuildElement} from "../../Hooks";

If you are running into circular references on a large project, I found this article really helpful in discussing a pattern to avoid the issue.

Jemimah

Answer 13

you will have to import fillCalendar like this.

import fillCalendar from '../calendar.tools'

so you have to remove curly brackets in import statement.

Accidie

This wouldn't solve the problem. The answer here as others have pointed out was I never exported the function. Your answer would be correct if you wrote export default in front of my function, then yes you would have to remove the curly braces. – Filter