Pre-commit eslint --fix error due to nonexistent errors-CodePudding

I am unable to commit changes on a file due to a failed pre-commit eslint --fix task, which returns the following errors:

× eslint --fix:

C:\Users\user\source\repos\project\project-frontend\src\components\Header.tsx
  654:61  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  654:61  error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions

✖ 2 problems (2 errors, 0 warnings)

I tried fixing these errors by adding a keyboard listener and a role to the component and its child button component in line 654 of said file, which didn't work.

            <Snackbar
                role="alert"
                tabIndex={0}
                style={{ right: '24px', textAlign: 'center' }}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left'
                }}
                open={openLgpd}
                onClose={handleCloseLgpd}
                onKeyDown={handleCloseLgpd}
                message="This is a message!"
                action={
                    <Button role="button" color="secondary" size="small" onKeyDown={handleCloseLgpd} onClick {handleCloseLgpd}>
                        OK
                    </Button>
                }
             />

I also tried ignoring these errors by adding the aria-hidden property to this component and its child, it didn't work either:

             <Snackbar
                aria-hidden
                tabIndex={0}
                style={{ right: '24px', textAlign: 'center' }}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left'
                }}
                open={openLgpd}
                onClose={handleCloseLgpd}
                message="This is a message!"
                action={
                    <Button role="button" color="secondary" size="small" aria-hidden onClick={handleCloseLgpd}>
                        OK
                    </Button>
                }
             />

The rendered component looks like this: snackbar component

When I tried deleting this component altogether, eslint returned the exact same errors on a line that didn't even exist in this file. I don't know what could be causing this. I use Webpack module bundler if that helps.

CodePudding user response：

I was able to solve this issue after an hour or two of googling and understanding how ESLint works, but I was only able to post an answer here now. Sorry about that. Here's what I learned:

Since my code was mostly written in TypeScript, ESLint could be linting the JavaScript compiled code (because ESLint was built specially for JavaScript, not TypeScript), thus throwing errors in the JS file's lines that didn't match my TS file's lines. Feel free to correct me if I'm wrong as I didn't go deep enough to fully understand the root cause of this issue, just solve it, and...
In order to better display ESLint error messages in VS Code, I installed it's official extension, which highlights errors in the correct lines on the text editor (whether you're working with JS or TS) and suggests quick solutions to them.

That was it, thanks to anyone who commented. Hope this might be useful.