codesandbox / codesandbox-client

An online IDE for rapid web development
https://codesandbox.io
Other
13.03k stars 2.27k forks source link

Eslint throws error in vanillajs for variable that have the same name as react hooks #7063

Open CalebJamesStevens opened 1 year ago

CalebJamesStevens commented 1 year ago

🐛 bug report

Preflight Checklist

Description of the problem

Eslint throw error for variable names that are the same as React namespaces in a vanilla js project.

For example.

Screen Shot 2022-10-26 at 10 21 15 AM

I have a vanilla project and can't use the name 'useState' for a variable because I can't declare react hooks at a top level. I recieved this error

React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function. (react-hooks/rules-of-hooks)eslint

How has this issue affected you? What are you trying to accomplish?

i'm trying to just play with code, not using react

To Reproduce

create a vanilla js project. in index.js create a function called useState. Try to call that function. Recieve eslint error.

Link to sandbox: link

Your Environment

Software Name/Version
Сodesandbox most recent as of 10/26/2022
Browser Chrome
Operating System MacOS
fweth commented 1 year ago

Please let us just have access to the ESLint config, so we can fix issues like this ourselves!

BTW I think it's even worse than just React namespace, it doesn't allow anything of the pattern /use[A-Z][A-z]*/ at all, I couldn't use useProgram but I'm pretty sure that's not a standard React hook.