Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PascalCase constant is classified as a component #71

Open
githorse opened this issue Dec 5, 2024 · 3 comments
Open

PascalCase constant is classified as a component #71

githorse opened this issue Dec 5, 2024 · 3 comments

Comments

@githorse
Copy link

githorse commented Dec 5, 2024

I think perhaps I'm seeing the converse of #26: I use PascalCase for my constants, and the plugin considers erroneously them to be components. An example that will trigger the rule:

export constant SomeConstant = 42 // ✗  [eslint] Fast refresh only works when a file only exports components ... 
export function someUtility() { return SomeConstant }

If I change that the capitalization to screaming snake, it passes:

export constant SOME_CONSTANT = 42 // ✓
export function someUtility() { return SOME_CONSTANT }

OK, I guess PascalCase is not the preferred convention here. But is there any global setting I'm missing that could easily prevent such constants from being flagged? (Using eslint-disable-next-line is more distracting than it's worth; if I have to do that I'll probably just switch to screaming snake, but that's not my preference.)

@ArnaudBarre
Copy link
Owner

ArnaudBarre commented Dec 5, 2024

Are you using a recent version? I don't have issue a warning with default options for this code:

export constant SomeConstant = 42
export function someUtility() { return SomeConstant }

This was probably buggy before 0.4.4, but now having PascalCase variable being init with something else than function or a function call should not be flagged as a React component.

@RazerM
Copy link

RazerM commented Dec 16, 2024

I had a file like this and the const RETRIES was being flagged, but renaming createRoutes to fit the component naming convention (e.g. to AppRoutes) fixed it.

const RETRIES = 3

export default function createRoutes() {
    return <App />
}

@ArnaudBarre
Copy link
Owner

ArnaudBarre commented Dec 16, 2024

React components should be PascalCase, this rules expect the convention to be followed like the official React hooks plugin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants