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

Do you want to request a feature or report a bug?

Bug 🐛🐛 (May be 🤔🙄)

What is the current behaviour?

I have created react functional component and implement state full logic using useState method but it throws an TypeError: Object(...) is not a function

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Installed packages

"dependencies": {
  "@reach/router": "^1.2.1",
  "formik": "^1.4.1",
  "prop-types": "^15.6.2",
  "react": "^16.7.0-alpha.2",
  "react-dom": "^16.7.0-alpha.2",
  "react-scripts": "2.1.1",
  "styled-components": "^4.1.3",
  "yup": "^0.26.6"
},

Github repository : https://github.com/sagar-gavhane/workbench-client Website: https://wonderful-allen-a3058d.netlify.com/ Screenshot: screenshot

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 35
  • Comments: 44 (2 by maintainers)

Commits related to this issue

Most upvoted comments

@sagar-gavhane you got a few glitches in your project setup. /src/components/Input/input.js

Line 1 should be import Input from ‘./Input.jsx’

/src/screens/auth/Login/Login.jsx Line 1 should be import Input from ‘…/…/…/components/Input/input.js’

and in package.json use “react”: “next”, “react-dom”: “next”,

You should be good after that.

I ran into this issue as well because somehow I assumed that Hooks moved into 16.7.0-alpha.2. But I had to use next instead. Thanks @nikilok

Both 16.7.0-alpha.2 and next (which we’ve fixed to point to it) should work.

Might help someone: Make sure you aren’t import { Foo } from 'Foo' when you should be import Foo from 'Foo'. That is… this error is actually pretty descriptive and you can confirm it by commenting out the erroring out code, then doing something like console.log(typeof Foo) to see if it is an actual function or if it’s something completely different.

This error might happen if you use old React. It’s not even a React error — you’re calling React.useState(), and if that doesn’t exist (such as in old versions), it’s like calling React.lalalala(). The function doesn’t exist, so you’re calling undefined() and it crashes.

It might also happen if you call a non-existent method on some other library.

I have the same error and just figure it out. The problem is when you copy the code from the demo site, this line is not correct:

import { makeStyles } from '@material-ui/core/styles';

Change to this one:

import { makeStyles } from "@material-ui/styles";

Check the docs from here

Hey guys! How are you using next to use hooks? FB says they aren’t even releasing yet and that it will be a few months, read here. currently I am using 16.7.0-alpha.2 and I still get the error.

16.7.0(latest) is not with hooks yet. Use 16.7.0-alpha.2(or next) instead for now.

FYI React v16.7: No, This Is Not The One With Hooks.

I just started getting this error in production. It doesn’t happen in development, though. I’m using 16.8.x. Can anyone shed light on what is actually causing it?

(But 16.8 is the first stable version to have Hooks)

I am still getting the error “TypeError: Object(…) is not a function” for using the useParams from react.

"react": "^16.13.1",
"react-dom": "^16.13.1",

npm install ng2-charts@2.2.0 --save work for me. fine

I was getting the same error. It was due to importing useState from the wrong library. If you’re using >16.8 make sure you have:

import React, { useState } from 'react';

I had to upgrade react-redux, delete my node_modules, then reinstall.

I got the same error, but somehow sorted it well . The issue was due to the React and React- Dom versions. I was using the older versions of React and React-dom. The issue sorted when i upgraded into latest version. Please make sure that you update both React and React-dom at the same time. Run the below commands in cmd to upgrade React . Open your package.json and check your current react and react-dom before updating.

npm install --save react@latest npm install --save react-dom@latest

I was using a named export instead of default and had to remove the brackets import { useSiteMetadata } from "../hooks/useSiteMetadata" import useSiteMetadata from "../hooks/useSiteMetadata"

@kami23 I just ran into this error. It could also be an indication that you are importing something in your component which doesn’t exist. For me it was this - import { withNavigation } from ‘@react-navigation/web’; This withNavigation doesn’t exist inside the @react-navigation/web .

Hey, your problem is complicated, but i could resolvet. You problem is React version. run this command: npm install react@next react-dom@next --save

Thanks, Dan!