-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Open
Labels
Description
Is there an existing issue for this?
- I have searched the existing issues and my issue is unique
- My issue appears in the command-line and not only in the text editor
Description Overview
react/jsx-handler-names
rule crashes with TypeError: Cannot read properties of undefined (reading 'split')
when encountering compound components (e.g., <Component.SubComponent />
).
Environment
- eslint-plugin-react: 7.37.5
- ESLint: 9.36.0
- Parser: @typescript-eslint/parser
Stack Trace
TypeError: Cannot read properties of undefined (reading 'split')
at Minimatch.match (node_modules/minimatch/minimatch.js:743:9)
at minimatch (node_modules/minimatch/minimatch.js:125:42)
at node_modules/eslint-plugin-react/lib/rules/jsx-handler-names.js:146:99
Root Cause
The rule incorrectly assumes node.parent.name.name
exists for all components:
// Line 144 in jsx-handler-names.js
const componentName = node.parent.name.name; // Returns undefined for compound components
const isComponentNameIgnored = ignoreComponentNames.some((pattern) => minimatch(
componentName, // undefined passed to minimatch
pattern
));
AST Structure Difference
Component Type | JSX | node.parent.name |
---|---|---|
Simple | <Button /> |
{ type: 'JSXIdentifier', name: 'Button' } ✅ |
Compound | <Select.Option /> |
{ type: 'JSXMemberExpression', object: {...}, property: {...} } ❌ |
For JSXMemberExpression
, there's no .name
property at the root level, causing undefined
to be passed to minimatch()
.
Minimal Reproduction
// test.jsx
const Component = () => {
const handleChange = () => {};
return <Select.Option onChange={handleChange} />; // Crashes here
};
// eslint.config.mjs
export default [{
plugins: { react: reactPlugin },
rules: {
'react/jsx-handler-names': ['warn', {
eventHandlerPrefix: 'handle',
eventHandlerPropPrefix: 'on'
}]
}
}];
Run: npx eslint test.jsx
→ TypeError
Workaround
Disable the rule for files with compound components:
export default [
{ rules: { 'react/jsx-handler-names': ['warn', {...}] } },
{
files: ['**/files-with-compound-components.tsx'],
rules: { 'react/jsx-handler-names': 'off' }
}
];
Expected Behavior
- Successfully parse compound components without crashing
- Apply handler naming conventions to compound components (e.g., warn if
<Select.Option onClick={doSomething} />
doesn't follow the configured naming pattern) - Support
ignoreComponentNames
patterns for compound components (e.g.,'Select.*'
or'*.Option'
)
eslint-plugin-react version
v7.37.5
eslint version
v9.36.0
node version
v23.5.0