Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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
It looks fine, you just have to export your function that's it.
export let fillCalendar = (month, year) => {
instead of
let fillCalendar = (month, year) => {
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)
                similar for me, but I was doing my import like a {named}  import, when actually it was supposed to be a default inport
– SeanMC
                Sep 9, 2021 at 20:16
                Same here - I had imported a React hook from "react/cjs/react.development" instead of "react".
– owencm
                Oct 4, 2021 at 22:08
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
Export function directly from after declaration
export default function Authorized(WrappedComponent) {
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;
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.
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.
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
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.
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:
In Chrome Dev console place a debug breakpoint right before the line which is causing the error.
Reload the page and wait for the breakpoint to hit.
Hover you mouse cursor over the imported modules to inspect them.
If a module has been loaded previously, but it is incomplete, you will notice that the member properties on the imported variable stop abruptly.
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.
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";
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.
you will have to import fillCalendar like this.
import fillCalendar from '../calendar.tools'
so you have to remove curly brackets in import statement.
                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.
– Ryan Sam
                Oct 18, 2020 at 22:28
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.