React: Bug: React Hook "useContext" is called in function "login" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

[mfhassan22]

i was creating new react app and was integrating with mobx while coding the following error arise which is wrong with respect to hook rules stated below

React version:"react": "^16.13.1"

where as the code is correct with respect to given rules

hook rules

The current behavior

React Hook "useContext" is called in function "login" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

The expected behavior

No error

[milesj]

@mfhassan22 Components must be capitalized. It should be Login not login.

[mfhassan22]

thank you and really sorry after four years i first time i realize this

[mfhassan22]

my mistake

[rickhanlonii]

This still seems like a bug. The error message you got says that "login is not a React function component", but it _is_ a function component, it just isn't valid because of the casing. Let's update this check so that it shows a similar message to the runtime error which is:

The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Something like:

React Hook "useContext" is called in function "login" which is not a valid React component because it does not start its name with an uppercase letter.

[rickhanlonii]

Here's the tests to fix and here's the code to change.

[sladyn98]

Would love to submit a pr if no one is working on it

[DanielJDupont]

I would like to work on it as my first issue, if that is possible.

[DanielJDupont]

Sorry I am kind of confused and new to this. The message: _"React Hook "useContext" is called in function "login" which is neither a React function component or a custom React Hook function"_ seems to be in an older version of React from 16.8.0 or 16.8.6 I think.

The old error message has been edited since and it doesn't seem to exist in version 16.13.1, but the old error message is the only one that appears.

I can't get the more recent version of the error message to appear in the file, nor any of the ones I want to implement in the file: packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

I don't think mfhassan22 should have even seen that specific error message he got on version 16.13.1. I am thinking that the error messages are fixed somehow to an old version of React?

[mfhassan22]

Sorry i am not a guru of react like you guys but if you want i can forward you the full source code the version i took from package.json and run it with npm run start
I posted it because a i saw a similar issue which was already closed and at the end it was written if the error still exists post it

[mfhassan22]

package.json

{ "name": "my-mobx-admin", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "less": "^3.12.2", "mobx": "^5.15.4", "mobx-react": "^6.2.2", "react": "^16.13.1", "react-app-rewire-less-and-css-modules": "^0.1.1", "react-dom": "^16.13.1", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "rsuite": "^4.8.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "copy-webpack-plugin": "^6.0.3", "css-loader": "^3.6.0", "less-loader": "^6.2.0", "style-loader": "^1.2.1" } }

i changed back the code to double check @DanielJDupont

[abhinav-TB]

i would like to work on this would someone guide me

[DanielJDupont]

@mfhassan22 Thanks for posting that, I have recreated your error and I am getting the same thing with what you have provided.

@abhinav-TB If you look at RulesOfHooks.js, you will see that the error message mfhassan22 gets (it is also the same error message I get), does not match what is in the code.

The file: RulesOfHooks.js, has the error message written so mfhassan22 and I should have seen:

  `React Hook "${context.getSource(hook)}" is called in ` +
                `function "${context.getSource(codePathFunctionName)}" ` +
                'that is neither a React function component nor a custom ' +
                'React Hook function.' +
                ' React component names must start with an uppercase letter.';

Which in the terminal appears as:

React Hook "useContext" is called in function is called in function "login" is called in function "login" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter.

It looks like to me that someone has tried to fix this bug before.

But the error message that is actually being displayed is not in the current version from what I can see, it is from an older version of React, but we are on the current release, and the code in it doesn't seem to contain the error message that is being displayed.

Maybe I am on the wrong track and misunderstanding how the ESLint Rules work, but I think it would be good if you could find a way to get your own custom error message to appear on your own build of React. I am trying to figure it out in my free time but I wouldn't expect myself to figure it out at this rate. I believe I have my own build working, but edits to the RulesOfHooks.js file do not seem to change any error messages.

[gaearon]

The version of React is unrelated for this issue.

What's related is the version of the ESLint plugin. The relevant hint for this message was already added in https://github.com/facebook/react/pull/18881. But that change has not yet made it to Create React App, which is using an older version of the plugin.

When Create React App releases the next update, that fix will be included.

Hope this helps!

[rickhanlonii]

Sorry for the confusion @DanielJDupont, I didn't realize that the message had already been updated 😬

Thanks for all you work investigating anyway!