-
Notifications
You must be signed in to change notification settings - Fork 45.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: React Compiler should not encode in JSX prop value #29120
Comments
Thanks for filing! Per @himself65’s comment this does appear to stem from Babel. We’ve noticed other issues with Babel incorrectly escaping JSX string attributes. However we can workaround this in the compiler by trying to detect when Babel would escape incorrectly and emit code differently. We’ll take a look! |
@josephsavona IMHO the most efficient and straight forward workaround would be like this: // React Compiler emitting
<div aria-label={'\u6211\u80FD\u541E\u4E0B\u73BB\u7483\u800C\u4E0D\u4F24\u8EAB\u4F53'} /> This works with all existing JSX transformers (Babel, SWC, ESBuild). |
Yeah I think this from babel issue and here is a workaround for playground code Subject: [PATCH] fix: files
---
Index: compiler/apps/playground/package.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/compiler/apps/playground/package.json b/compiler/apps/playground/package.json
--- a/compiler/apps/playground/package.json (revision 5ab54718a52d738dcbd03fcb43a556993b445ed4)
+++ b/compiler/apps/playground/package.json (date 1715928974123)
@@ -12,15 +12,15 @@
"test": "playwright test"
},
"dependencies": {
- "@babel/core": "^7.19.1",
- "@babel/parser": "^7.19.1",
- "@babel/plugin-syntax-typescript": "^7.18.6",
- "@babel/plugin-transform-block-scoping": "^7.18.9",
- "@babel/plugin-transform-modules-commonjs": "^7.18.6",
- "@babel/preset-react": "^7.18.6",
- "@babel/preset-typescript": "^7.18.6",
- "@babel/traverse": "^7.19.1",
- "@babel/types": "^7.19.0",
+ "@babel/core": "8.0.0-alpha.8",
+ "@babel/parser": "8.0.0-alpha.8",
+ "@babel/plugin-syntax-typescript": "8.0.0-alpha.8",
+ "@babel/plugin-transform-block-scoping": "8.0.0-alpha.8",
+ "@babel/plugin-transform-modules-commonjs": "8.0.0-alpha.8",
+ "@babel/preset-react": "8.0.0-alpha.8",
+ "@babel/preset-typescript": "8.0.0-alpha.8",
+ "@babel/traverse": "8.0.0-alpha.8",
+ "@babel/types": "8.0.0-alpha.8",
"@heroicons/react": "^1.0.6",
"@monaco-editor/react": "^4.4.6",
"@playwright/test": "^1.42.1",
@@ -52,10 +52,10 @@
"tailwindcss": "^3.2.4"
},
"resolutions": {
- "./**/@babel/parser": "7.7.4",
- "./**/@babel/types": "7.7.4",
- "@babel/core": "7.2.0",
- "@babel/traverse": "7.1.6",
- "@babel/generator": "7.2.0"
+ "./**/@babel/parser": "8.0.0-alpha.8",
+ "./**/@babel/types": "8.0.0-alpha.8",
+ "@babel/core": "8.0.0-alpha.8",
+ "@babel/traverse": "8.0.0-alpha.8",
+ "@babel/generator": "8.0.0-alpha.8"
}
} |
@SukkaW yup JsxExpressionContainer is the workaround we’ve been using for these types of Babel escaping issues. We can’t depend on 8 yet just because of the need for backward compatibility. |
React version: 19.0.0-beta-26f2496093-20240514
Steps To Reproduce
Link to code example:
Input Code
React Compiler Output
React Compiler Playground
Babel / SWC / ESBuild JSX transform
SWC:
SWC Playground
Babel:
Babel REPL
ESBuild:
ESBuild REPL
The current behavior
The prop value becomes double escaped.
The expected behavior
The prop value should only be escaped once.
The text was updated successfully, but these errors were encountered: