diff --git a/packages/babel-helper-builder-react-jsx-experimental/src/index.js b/packages/babel-helper-builder-react-jsx-experimental/src/index.js
index 9f795a72081d..b70bb5a36f9b 100644
--- a/packages/babel-helper-builder-react-jsx-experimental/src/index.js
+++ b/packages/babel-helper-builder-react-jsx-experimental/src/index.js
@@ -303,12 +303,15 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
"JSXElement|JSXFragment"(path) {
if (path.type === "JSXFragment") imports.add("Fragment");
const openingPath = path.get("openingElement");
- const validChildren = openingPath.parent.children.filter(
- child =>
- !t.isJSXEmptyExpression(child) &&
- !(t.isJSXText(child) && child.value.trim() === ""),
- );
-
+ const validChildren = openingPath.parent.children.filter(child => {
+ if (t.isJSXText(child)) {
+ const args = [];
+ t.react.cleanJSXElementLiteralChild(child, args);
+ return args.length > 0;
+ } else {
+ return !t.isJSXEmptyExpression(child);
+ }
+ });
let importName;
if (path.type === "JSXElement" && shouldUseCreateElement(path)) {
importName = "createElement";
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/weird-symbols/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/weird-symbols/input.js
new file mode 100644
index 000000000000..e4bc0b7035e2
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/weird-symbols/input.js
@@ -0,0 +1,5 @@
+class MobileHomeActivityTaskPriorityIcon extends React.PureComponent {
+ render() {
+ return {this.props.value} ;
+ }
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/weird-symbols/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/weird-symbols/output.mjs
new file mode 100644
index 000000000000..65cfda12fc6a
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/weird-symbols/output.mjs
@@ -0,0 +1,10 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+class MobileHomeActivityTaskPriorityIcon extends React.PureComponent {
+ render() {
+ return /*#__PURE__*/_jsxs(Text, {
+ children: ["\xA0", this.props.value, "\xA0"]
+ });
+ }
+
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/weird-symbols/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/weird-symbols/input.js
new file mode 100644
index 000000000000..b637892cb8fc
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/weird-symbols/input.js
@@ -0,0 +1,7 @@
+/** @jsxRuntime classic */
+
+class MobileHomeActivityTaskPriorityIcon extends React.PureComponent {
+ render() {
+ return {this.props.value}nbsp;;
+ }
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/weird-symbols/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/weird-symbols/output.js
new file mode 100644
index 000000000000..71e93a72cf4c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/weird-symbols/output.js
@@ -0,0 +1,7 @@
+/** @jsxRuntime classic */
+class MobileHomeActivityTaskPriorityIcon extends React.PureComponent {
+ render() {
+ return /*#__PURE__*/React.createElement(Text, null, "\xA0", this.props.value, "nbsp;");
+ }
+
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/react/weird-symbols/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/weird-symbols/input.js
new file mode 100644
index 000000000000..b637892cb8fc
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/weird-symbols/input.js
@@ -0,0 +1,7 @@
+/** @jsxRuntime classic */
+
+class MobileHomeActivityTaskPriorityIcon extends React.PureComponent {
+ render() {
+ return {this.props.value}nbsp;;
+ }
+}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/react/weird-symbols/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/weird-symbols/output.js
new file mode 100644
index 000000000000..71e93a72cf4c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/weird-symbols/output.js
@@ -0,0 +1,7 @@
+/** @jsxRuntime classic */
+class MobileHomeActivityTaskPriorityIcon extends React.PureComponent {
+ render() {
+ return /*#__PURE__*/React.createElement(Text, null, "\xA0", this.props.value, "nbsp;");
+ }
+
+}
diff --git a/packages/babel-types/src/index.js b/packages/babel-types/src/index.js
index b0586a4f90ec..dfd665a8811c 100644
--- a/packages/babel-types/src/index.js
+++ b/packages/babel-types/src/index.js
@@ -2,6 +2,7 @@
import isReactComponent from "./validators/react/isReactComponent";
import isCompatTag from "./validators/react/isCompatTag";
import buildChildren from "./builders/react/buildChildren";
+import cleanJSXElementLiteralChild from "./utils/react/cleanJSXElementLiteralChild";
// asserts
export { default as assertNode } from "./asserts/assertNode";
@@ -93,4 +94,5 @@ export const react = {
isReactComponent,
isCompatTag,
buildChildren,
+ cleanJSXElementLiteralChild,
};