diff --git a/crates/oxc_linter/src/rules.rs b/crates/oxc_linter/src/rules.rs
index c8d4b98f6..08fdf0249 100644
--- a/crates/oxc_linter/src/rules.rs
+++ b/crates/oxc_linter/src/rules.rs
@@ -177,6 +177,7 @@ mod react {
pub mod no_unknown_property;
pub mod react_in_jsx_scope;
pub mod require_render_return;
+ pub mod void_dom_elements_no_children;
}
mod react_perf {
@@ -545,6 +546,7 @@ oxc_macros::declare_all_lint_rules! {
react::no_is_mounted,
react::no_unknown_property,
react::require_render_return,
+ react::void_dom_elements_no_children,
react_perf::jsx_no_jsx_as_prop,
react_perf::jsx_no_new_array_as_prop,
react_perf::jsx_no_new_function_as_prop,
diff --git a/crates/oxc_linter/src/rules/react/void_dom_elements_no_children.rs b/crates/oxc_linter/src/rules/react/void_dom_elements_no_children.rs
new file mode 100644
index 000000000..c08d0f5af
--- /dev/null
+++ b/crates/oxc_linter/src/rules/react/void_dom_elements_no_children.rs
@@ -0,0 +1,227 @@
+use oxc_ast::{
+ ast::{
+ Argument, Expression, JSXAttributeItem, JSXAttributeName, JSXElementName,
+ ObjectPropertyKind, PropertyKey,
+ },
+ AstKind,
+};
+use oxc_diagnostics::{
+ miette::{self, Diagnostic},
+ thiserror::Error,
+};
+use oxc_macros::declare_oxc_lint;
+use oxc_span::Span;
+use phf::phf_set;
+
+use crate::{context::LintContext, rule::Rule, utils::is_create_element_call, AstNode};
+
+#[derive(Debug, Error, Diagnostic)]
+#[error("eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. `
`, `
`) from receiving children.")]
+#[diagnostic(severity(warning), help("Void DOM element <{0:?} /> cannot receive children."))]
+struct VoidDomElementsNoChildrenDiagnostic(pub String, #[label] pub Span);
+
+#[derive(Debug, Default, Clone)]
+pub struct VoidDomElementsNoChildren;
+
+declare_oxc_lint!(
+ /// ### What it does
+ /// There are some HTML elements that are only self-closing (e.g. img, br, hr). These are collectively known as void DOM elements.
+ /// This rule checks that children are not passed to void DOM elements.
+ ///
+ /// ### Example
+ /// ```javascript
+ /// // Bad
+ ///
Children
+ ///
+ ///
+ /// React.createElement('br', undefined, 'Children')
+ /// React.createElement('br', { children: 'Children' })
+ /// React.createElement('br', { dangerouslySetInnerHTML: { __html: 'HTML' } })
+ ///
+ /// // Good
+ ///
Children
+ ///
+ ///
+ /// React.createElement('div', undefined, 'Children')
+ /// React.createElement('div', { children: 'Children' })
+ /// React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } })
+ /// ```
+ VoidDomElementsNoChildren,
+ correctness
+);
+
+const VOID_DOM_ELEMENTS: phf::Set<&'static str> = phf_set![
+ "area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "menuitem",
+ "meta", "param", "source", "track", "wbr",
+];
+
+pub fn is_void_dom_element(element_name: &str) -> bool {
+ VOID_DOM_ELEMENTS.contains(element_name)
+}
+
+impl Rule for VoidDomElementsNoChildren {
+ fn run<'a>(&self, node: &AstNode<'a>, ctx: &LintContext<'a>) {
+ match node.kind() {
+ AstKind::JSXElement(jsx_el) => {
+ let jsx_opening_el = &jsx_el.opening_element;
+ let JSXElementName::Identifier(identifier) = &jsx_opening_el.name else {
+ return;
+ };
+
+ if !is_void_dom_element(&identifier.name) {
+ return;
+ }
+
+ let has_children_attribute_or_danger =
+ jsx_opening_el.attributes.iter().any(|attribute| match attribute {
+ JSXAttributeItem::Attribute(attr) => {
+ let JSXAttributeName::Identifier(iden) = &attr.name else {
+ return false;
+ };
+ iden.name == "children" || iden.name == "dangerouslySetInnerHTML"
+ }
+ JSXAttributeItem::SpreadAttribute(_) => false,
+ });
+
+ if !jsx_el.children.is_empty() || has_children_attribute_or_danger {
+ ctx.diagnostic(VoidDomElementsNoChildrenDiagnostic(
+ identifier.name.to_string(),
+ identifier.span,
+ ));
+ }
+ }
+ AstKind::CallExpression(call_expr) => {
+ if !is_create_element_call(call_expr) {
+ return;
+ }
+
+ if call_expr.arguments.is_empty() {
+ return;
+ }
+
+ let Some(Argument::Expression(Expression::StringLiteral(element_name))) =
+ call_expr.arguments.first()
+ else {
+ return;
+ };
+
+ if !is_void_dom_element(element_name.value.as_str()) {
+ return;
+ }
+
+ if call_expr.arguments.len() < 2 {
+ return;
+ }
+
+ let Some(Argument::Expression(Expression::ObjectExpression(obj_expr))) =
+ call_expr.arguments.get(1)
+ else {
+ return;
+ };
+
+ let has_children_prop_or_danger =
+ obj_expr.properties.iter().any(|property| match property {
+ ObjectPropertyKind::ObjectProperty(prop) => match &prop.key {
+ PropertyKey::Identifier(iden) => {
+ iden.name == "children" || iden.name == "dangerouslySetInnerHTML"
+ }
+ _ => false,
+ },
+ ObjectPropertyKind::SpreadProperty(_) => false,
+ });
+
+ if call_expr.arguments.get(2).is_some() || has_children_prop_or_danger {
+ ctx.diagnostic(VoidDomElementsNoChildrenDiagnostic(
+ element_name.value.to_string(),
+ element_name.span,
+ ));
+ }
+ }
+ _ => {}
+ }
+ }
+}
+
+#[test]
+fn test() {
+ use crate::tester::Tester;
+
+ let pass = vec![
+ (r"Foo
;", None),
+ (r";", None),
+ (r";", None),
+ (r"React.createElement('div', {}, 'Foo');", None),
+ (r"React.createElement('div', { children: 'Foo' });", None),
+ (r"React.createElement('div', { dangerouslySetInnerHTML: { __html: 'Foo' } });", None),
+ (r"React.createElement('img');", None),
+ (r"React.createElement();", None),
+ (
+ r"
+ const props = {};
+ React.createElement('img', props);
+ ",
+ None,
+ ),
+ (
+ r"
+ import React, {createElement} from 'react';
+ createElement('div');
+ ",
+ None,
+ ),
+ (
+ r"
+ import React, {createElement} from 'react';
+ createElement('img');
+ ",
+ None,
+ ),
+ (
+ r"
+ import React, {createElement, PureComponent} from 'react';
+ class Button extends PureComponent {
+ handleClick(ev) {
+ ev.preventDefault();
+ }
+ render() {
+ return Hello
;
+ }
+ }
+ ",
+ None,
+ ),
+ ];
+
+ let fail = vec![
+ (r"
Foo;", None),
+ (r"
;", None),
+ (r"
;", None),
+ (r"
;", None),
+ (r"React.createElement('br', {}, 'Foo');", None),
+ (r"React.createElement('br', { children: 'Foo' });", None),
+ (r"React.createElement('br', { dangerouslySetInnerHTML: { __html: 'Foo' } });", None),
+ (
+ r"
+ import React, {createElement} from 'react';
+ createElement('img', {}, 'Foo');
+ ",
+ None,
+ ),
+ (
+ r"
+ import React, {createElement} from 'react';
+ createElement('img', { children: 'Foo' });
+ ",
+ None,
+ ),
+ (
+ r"
+ import React, {createElement} from 'react';
+ createElement('img', { dangerouslySetInnerHTML: { __html: 'Foo' } });
+ ",
+ None,
+ ),
+ ];
+
+ Tester::new(VoidDomElementsNoChildren::NAME, pass, fail).test_and_snapshot();
+}
diff --git a/crates/oxc_linter/src/snapshots/void_dom_elements_no_children.snap b/crates/oxc_linter/src/snapshots/void_dom_elements_no_children.snap
new file mode 100644
index 000000000..80727bfcf
--- /dev/null
+++ b/crates/oxc_linter/src/snapshots/void_dom_elements_no_children.snap
@@ -0,0 +1,81 @@
+---
+source: crates/oxc_linter/src/tester.rs
+expression: void_dom_elements_no_children
+---
+
+ ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. `
`, `
`) from receiving children.
+ ╭─[void_dom_elements_no_children.tsx:1:2]
+ 1 │
Foo;
+ · ──
+ ╰────
+ help: Void DOM element <"br" /> cannot receive children.
+
+ ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. `
`, `
`) from receiving children.
+ ╭─[void_dom_elements_no_children.tsx:1:2]
+ 1 │
;
+ · ──
+ ╰────
+ help: Void DOM element <"br" /> cannot receive children.
+
+ ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. `
`, `
`) from receiving children.
+ ╭─[void_dom_elements_no_children.tsx:1:2]
+ 1 │
;
+ · ───
+ ╰────
+ help: Void DOM element <"img" /> cannot receive children.
+
+ ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. `
`, `
`) from receiving children.
+ ╭─[void_dom_elements_no_children.tsx:1:2]
+ 1 │
;
+ · ──
+ ╰────
+ help: Void DOM element <"br" /> cannot receive children.
+
+ ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. `
`, `
`) from receiving children.
+ ╭─[void_dom_elements_no_children.tsx:1:21]
+ 1 │ React.createElement('br', {}, 'Foo');
+ · ────
+ ╰────
+ help: Void DOM element <"br" /> cannot receive children.
+
+ ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. `
`, `
`) from receiving children.
+ ╭─[void_dom_elements_no_children.tsx:1:21]
+ 1 │ React.createElement('br', { children: 'Foo' });
+ · ────
+ ╰────
+ help: Void DOM element <"br" /> cannot receive children.
+
+ ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. `
`, `
`) from receiving children.
+ ╭─[void_dom_elements_no_children.tsx:1:21]
+ 1 │ React.createElement('br', { dangerouslySetInnerHTML: { __html: 'Foo' } });
+ · ────
+ ╰────
+ help: Void DOM element <"br" /> cannot receive children.
+
+ ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. `
`, `
`) from receiving children.
+ ╭─[void_dom_elements_no_children.tsx:3:31]
+ 2 │ import React, {createElement} from 'react';
+ 3 │ createElement('img', {}, 'Foo');
+ · ─────
+ 4 │
+ ╰────
+ help: Void DOM element <"img" /> cannot receive children.
+
+ ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. `
`, `
`) from receiving children.
+ ╭─[void_dom_elements_no_children.tsx:3:31]
+ 2 │ import React, {createElement} from 'react';
+ 3 │ createElement('img', { children: 'Foo' });
+ · ─────
+ 4 │
+ ╰────
+ help: Void DOM element <"img" /> cannot receive children.
+
+ ⚠ eslint-plugin-react(void-dom-elements-no-children): Disallow void DOM elements (e.g. `
`, `
`) from receiving children.
+ ╭─[void_dom_elements_no_children.tsx:3:31]
+ 2 │ import React, {createElement} from 'react';
+ 3 │ createElement('img', { dangerouslySetInnerHTML: { __html: 'Foo' } });
+ · ─────
+ 4 │
+ ╰────
+ help: Void DOM element <"img" /> cannot receive children.
+