diff --git a/packages/mdx/lib/plugin/recma-jsx-rewrite.js b/packages/mdx/lib/plugin/recma-jsx-rewrite.js
index 1e82a1e41..eb5286a27 100644
--- a/packages/mdx/lib/plugin/recma-jsx-rewrite.js
+++ b/packages/mdx/lib/plugin/recma-jsx-rewrite.js
@@ -387,11 +387,13 @@ export function recmaJsxRewrite(options = {}) {
               })
             }
 
-            statements.push({
-              type: 'VariableDeclaration',
-              kind: 'const',
-              declarations
-            })
+            if (declarations.length > 0) {
+              statements.push({
+                type: 'VariableDeclaration',
+                kind: 'const',
+                declarations
+              })
+            }
           }
 
           /** @type {string} */
diff --git a/packages/mdx/test/compile.js b/packages/mdx/test/compile.js
index d5a10ee05..03891aae8 100644
--- a/packages/mdx/test/compile.js
+++ b/packages/mdx/test/compile.js
@@ -1173,6 +1173,41 @@ test('remark-rehype options', async () => {
   )
 })
 
+/** @see https://github.com/mdx-js/mdx/issues/2112 */
+test('layout function with passthrough HTML', async () => {
+  renderToStaticMarkup(
+    React.createElement(
+      await run(
+        await compile(
+          `
+export default function ({ children }) { return <div>{children}</div>; }
+
+<h1>bar</h1>
+<custom-element />
+`,
+          {
+            remarkPlugins: [
+              () => {
+                const transform = async (
+                  /** @type {Root & { children: (import('mdast').Content)[] }} */ tree
+                ) => {
+                  tree.children.push({
+                    type: 'html',
+                    value: `<custom-element />`
+                  })
+                }
+
+                return transform
+              }
+            ],
+            rehypePlugins: [[rehypeRaw, {passThrough: nodeTypes}]]
+          }
+        )
+      )
+    )
+  )
+})
+
 test('MDX (JSX)', async () => {
   assert.equal(
     renderToStaticMarkup(