diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
index 9ff169346b..81d0569639 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
@@ -6,6 +6,7 @@
*/
import * as t from "@babel/types";
+import { createHmac } from "crypto";
import { pruneHoistedContexts, pruneUnusedLValues, pruneUnusedLabels } from ".";
import { CompilerError, ErrorSeverity } from "../CompilerError";
import { Environment, EnvironmentConfig, ExternalFunction } from "../HIR";
@@ -43,7 +44,6 @@ import { assertExhaustive } from "../Utils/utils";
import { buildReactiveFunction } from "./BuildReactiveFunction";
import { SINGLE_CHILD_FBT_TAGS } from "./MemoizeFbtOperandsInSameScope";
import { ReactiveFunctionVisitor, visitReactiveFunction } from "./visitors";
-import { createHmac } from "crypto";
export const MEMO_CACHE_SENTINEL = "react.memo_cache_sentinel";
export const EARLY_RETURN_SENTINEL = "react.early_return_sentinel";
@@ -2018,6 +2018,11 @@ function codegenInstructionValue(
return value;
}
+/**
+ * Due to a bug in earlier Babel versions, JSX string attributes with double quotes or with unicode characters
+ * may be escaped unnecessarily. To avoid trigger this Babel bug, we use a JsxExpressionContainer for such strings.
+ */
+const STRING_REQUIRES_EXPR_CONTAINER_PATTERN = /[\u{0080}-\u{FFFF}]|"/u;
function codegenJsxAttribute(
cx: Context,
attribute: JsxAttribute
@@ -2040,7 +2045,7 @@ function codegenJsxAttribute(
switch (innerValue.type) {
case "StringLiteral": {
value = innerValue;
- if (value.value.indexOf('"') !== -1) {
+ if (STRING_REQUIRES_EXPR_CONTAINER_PATTERN.test(value.value)) {
value = createJsxExpressionContainer(value.loc, value);
}
break;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-non-ascii.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-non-ascii.expect.md
new file mode 100644
index 0000000000..1cb36945e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-non-ascii.expect.md
@@ -0,0 +1,97 @@
+
+## Input
+
+```javascript
+function Component() {
+ return (
+