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

[sagar-gavhane]

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:

[nikilok]

@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.

[rwieruch]

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

[VdustR]

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.

[pungggi]

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.

very confusing..

[WillSquire]

Had to use next instead of 16.7.0-alpha.2 also, is this expected behaviour?

Really wanted a specific version in package.json instead of next.

[JNaeemGitonga]

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.

[ctur]

The link you have passed already says that? @JNaeemGitonga

[JNaeemGitonga]

@ctur can tell you didn't read the question.

[EdmundsEcho]

FYI - using 16.7.0-alpha.2 _should_ work as an entry into the package.json. However, in my experience, only when I changed the entry to next (per the advice above), did the error go away.

Note, I also deleted my yarn.lock and node_modules for good measure.

[gaearon]

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

[gaearon]

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

[volkanunsal]

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?

[gaearon]

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.

[volkanunsal]

Thanks, Dan!

[steelx]

I was getting the same erorr, but then I released I was using createState instead of useState

[merveillevaneck]

Hey! came across this while having a very similar issue except ive checked all the solutions and it doesnt seem to solve the problem. I'm very new to functional paradigms and react(and even javascript), what else should i try to investigate?

I've got a lambda function as a component which has a body that starts off by generating some hooks. but it looks like the lambda isnt recognised, even though all my other components are lambdas too and they seem to work fine

[corysimmons]

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.

[Tony1106]

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

[Vijay-Barve]

try this
npm install [email protected] [email protected] --save

[EdDevs2503]

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

[eebasadre20]

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

@EdDevs2503 I tried yours but it didn't work for me. I found out that when I tried to import { useRouter, matchPath } from 'next/router', the matchPath is undefined. I'm not sure what will be the equivalent of matchPath in next.

[kami23]

Hello , i have the same problem and the version of react that i am using is :
"react": "^16.9.0",
"react-dom": "^16.9.0",
How to solve this ? i tried to use the next solution and it didn't work

[kapilgorve]

@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 .

[codecrimson]

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';

[N-Akoma]

TypeError: Cannot read property 'pxToRem' of undefined
(anonymous function)
C:/Users/Young Akoma/Desktop/Anthony/page-app/src/Components/Explore.js:16
13 | width: '100%',
14 | },
15 | heading: {

16 | fontSize: theme.typography.pxToRem(15),
| ^ 17 | flexBasis: '33.33%',
18 | flexShrink: 0,
19 | },

please i really need help for this. i cant resolve it

[kevinjose1]

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

[jith87]

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

This fixed the issue.

[waqaramjad]

@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.

thanks @nikilok you resolved my issue but i want to know the logic behind that because i never used next in react version

[N-Akoma]

thanks

On Wed, Oct 23, 2019 at 2:40 AM Waqar Amjad [e-mail]
wrote:

@sagar-gavhane https://github.com/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.

thanks @nikilok https://github.com/nikilok you resolved my issue but i
want to know the logic behind that because i never used next in react
version

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react/issues/14484?email_source=notifications&email_token=AMG44RYN7Z7PURDBGG54IRDQQAL2FA5CNFSM4GL526V2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECAYC6Q#issuecomment-545358202,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AMG44R66EHA4GTZYJNEVM2DQQAL2FANCNFSM4GL526VQ
.

[zackster]

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

[danielravina]

I was struggling with this for the past 2 hours. was a typo for me

import React, { useContex } from "react";`

... many lines below ...

const { projects } = useContex(AppContext);

😭

[wjes]

My error was trying to import useQuery from react instead of @apollo/react-hooks, thanks you all!

[jeremy-hunter]

Wow - thank you - I did the same thing 🤦

[hamzahassan52]

npm install [email protected] --save work for me. fine

[mediamaker]

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"

[alexotoo]

have a closer look at the name of the value passed in reference to the function. Is it the same name you typed as your prop?
Need more details on your code

[dandv]

All these comments about how tiny typos caused all this time waste and frustration, suggest that this error could be clarified by echoing the incorrect name. @gaearon, anything that could be done in that direction, or is this a JavaScript limitation?

[atidivya]

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",

[jyotiprakash111]

@atidivya Do you able to solve the issue or not ?

[KrunalRajkotiya]

I had come across the same problem and what worked for me is updating the react and react-dom to the latest version.

To update to the latest version.
npm install --save react@latest
npm install --save react-dom@latest

Now my current version of react and reat-dom is
"react": "^16.13.1"
"react-dom": "^16.13.1"

[THPubs]

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"

Thanks a lot @mediamaker . This worked for my use case where I was importing a function which use React inside a NextJS project.

[lavahasif]

npm install --save react@latest
npm install --save react-dom@latest
this solved my problem .when i was using usestate and useeffect in react

[smtlab]

Just do npm audit fix =)

[gaearon]

I'm going to lock this because the comments are either getting repetitive or include unrelated suggestions.

If you have this error, it means you're importing something that doesn't exist. It doesn't have to do with React per se.