diff --git a/lib/rules/jsx-no-useless-fragment.js b/lib/rules/jsx-no-useless-fragment.js
index af29cd9b03..fb05be1c4c 100644
--- a/lib/rules/jsx-no-useless-fragment.js
+++ b/lib/rules/jsx-no-useless-fragment.js
@@ -125,12 +125,22 @@ module.exports = {
/^[a-z]+$/.test(node.parent.openingElement.name.name);
}
+ /**
+ * @param {JSXElement|JSXFragment} node
+ * @return {boolean}
+ */
+ function isChildOfComponentElement(node) {
+ return node.parent.type === 'JSXElement' &&
+ !isChildOfHtmlElement(node) &&
+ !jsxUtil.isFragment(node.parent, reactPragma, fragmentPragma);
+ }
+
/**
* @param {ASTNode} node
* @returns {boolean}
*/
function canFix(node) {
- // Fragments that are child elements can always be fixed
+ // Not safe to fix fragments without a jsx parent.
if (!(node.parent.type === 'JSXElement' || node.parent.type === 'JSXFragment')) {
// const a = <>>
if (node.children.length === 0) {
@@ -143,6 +153,11 @@ module.exports = {
}
}
+ // Not safe to fix `<>foo>` because `Eeee` might require its children be a ReactElement.
+ if (isChildOfComponentElement(node)) {
+ return false;
+ }
+
return true;
}
diff --git a/tests/lib/rules/jsx-no-useless-fragment.js b/tests/lib/rules/jsx-no-useless-fragment.js
index 98ed74f5b1..9349fd2a6d 100644
--- a/tests/lib/rules/jsx-no-useless-fragment.js
+++ b/tests/lib/rules/jsx-no-useless-fragment.js
@@ -138,8 +138,9 @@ ruleTester.run('jsx-no-uselses-fragment', rule, {
errors: [{messageId: 'NeedsMoreChidren'}]
},
{
+ // Not safe to fix this case because `Eeee` might require child be ReactElement
code: '<>foo>',
- output: 'foo',
+ output: null,
errors: [{messageId: 'NeedsMoreChidren'}],
parser: parsers.BABEL_ESLINT
},