diff --git a/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.spec.ts b/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.spec.ts
index 60e330e4003b03..59d6661bedd11b 100644
--- a/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.spec.ts
+++ b/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.spec.ts
@@ -108,4 +108,10 @@ describe('babel-restore-jsx', () => {
)
).toMatchInlineSnapshot(`"
{foo ?
: null};"`)
})
+
+ it('should handle lowercase component names', () => {
+ expect(jsx('React.createElement(aaa)')).toMatchInlineSnapshot(
+ `"React.createElement(aaa);"`
+ )
+ })
})
diff --git a/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.ts b/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.ts
index 0ac0a1f831c79a..da08f5327a4eae 100644
--- a/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.ts
+++ b/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.ts
@@ -76,7 +76,7 @@ export default function ({ types: t }: typeof babel): babel.PluginObj {
return null
}
- const name = getJSXIdentifier(node)
+ const name = getJSXIdentifier(node, true)
if (name != null) {
return name
}
@@ -152,9 +152,9 @@ export default function ({ types: t }: typeof babel): babel.PluginObj {
return children
}
- function getJSXIdentifier(node: any) {
+ function getJSXIdentifier(node: any, tag = false) {
//TODO: JSXNamespacedName
- if (t.isIdentifier(node)) {
+ if (t.isIdentifier(node) && (!tag || node.name.match(/^[A-Z]/))) {
return t.jsxIdentifier(node.name)
}
if (t.isStringLiteral(node)) {