diff --git a/docs/_asset/editor.jsx b/docs/_asset/editor.jsx
index 7f646f0b6..c2939c7d6 100644
--- a/docs/_asset/editor.jsx
+++ b/docs/_asset/editor.jsx
@@ -1,4 +1,7 @@
-/* @jsxRuntime automatic @jsxImportSource react */
+/*
+ * @jsxRuntime automatic
+ * @jsxImportSource react
+ */
 
 /**
  * @typedef {import('@wooorm/starry-night').Grammar} Grammar
diff --git a/docs/docs/using-mdx.mdx b/docs/docs/using-mdx.mdx
index 932385136..b990a8912 100644
--- a/docs/docs/using-mdx.mdx
+++ b/docs/docs/using-mdx.mdx
@@ -41,7 +41,8 @@ That’s *roughly* turned into the following JavaScript.
 The below might help to form a mental model:
 
 ```tsx path="output-outline.jsx"
-/* @jsxRuntime automatic @jsxImportSource react */
+/* @jsxRuntime automatic */
+/* @jsxImportSource react */
 
 export function Thing() {
   return <>World</>
diff --git a/packages/mdx/lib/plugin/recma-document.js b/packages/mdx/lib/plugin/recma-document.js
index 82a9b93e7..0f7db1f6d 100644
--- a/packages/mdx/lib/plugin/recma-document.js
+++ b/packages/mdx/lib/plugin/recma-document.js
@@ -73,8 +73,6 @@ export function recmaDocument(options) {
     const exportedIdentifiers = []
     /** @type {Array<Directive | ModuleDeclaration | Statement>} */
     const replacement = []
-    /** @type {Array<string>} */
-    const pragmas = []
     let exportAllCount = 0
     /** @type {ExportDefaultDeclaration | ExportSpecifier | undefined} */
     let layout
@@ -83,31 +81,20 @@ export function recmaDocument(options) {
     /** @type {Node} */
     let child
 
-    if (jsxRuntime) {
-      pragmas.push('@jsxRuntime ' + jsxRuntime)
-    }
-
-    if (jsxRuntime === 'automatic' && jsxImportSource) {
-      pragmas.push('@jsxImportSource ' + jsxImportSource)
+    if (jsxRuntime === 'classic' && pragmaFrag) {
+      injectPragma(tree, '@jsxFrag', pragmaFrag)
     }
 
     if (jsxRuntime === 'classic' && pragma) {
-      pragmas.push('@jsx ' + pragma)
+      injectPragma(tree, '@jsx', pragma)
     }
 
-    if (jsxRuntime === 'classic' && pragmaFrag) {
-      pragmas.push('@jsxFrag ' + pragmaFrag)
+    if (jsxRuntime === 'automatic' && jsxImportSource) {
+      injectPragma(tree, '@jsxImportSource', jsxImportSource)
     }
 
-    /* c8 ignore next -- comments can be missing in the types, we always have it. */
-    if (!tree.comments) tree.comments = []
-
-    if (pragmas.length > 0) {
-      tree.comments.unshift({
-        type: 'Block',
-        value: pragmas.join(' '),
-        data: {_mdxIsPragmaComment: true}
-      })
+    if (jsxRuntime) {
+      injectPragma(tree, '@jsxRuntime', jsxRuntime)
     }
 
     if (jsxRuntime === 'classic' && pragmaImportSource) {
@@ -706,6 +693,20 @@ export function recmaDocument(options) {
   }
 }
 
+/**
+ * @param {Program} tree
+ * @param {string} name
+ * @param {string} value
+ * @returns {undefined}
+ */
+function injectPragma(tree, name, value) {
+  tree.comments?.unshift({
+    type: 'Block',
+    value: name + ' ' + value,
+    data: {_mdxIsPragmaComment: true}
+  })
+}
+
 /**
  * @param {Expression} importMetaUrl
  * @returns {FunctionDeclaration}
diff --git a/packages/mdx/lib/plugin/recma-jsx-build.js b/packages/mdx/lib/plugin/recma-jsx-build.js
index c4445510d..1bd8ef30a 100644
--- a/packages/mdx/lib/plugin/recma-jsx-build.js
+++ b/packages/mdx/lib/plugin/recma-jsx-build.js
@@ -45,13 +45,10 @@ export function recmaJsxBuild(options) {
 
     // Remove the pragma comment that we injected ourselves as it is no longer
     // needed.
-    if (
-      tree.comments &&
-      tree.comments[0].type === 'Block' &&
-      tree.comments[0].data &&
-      tree.comments[0].data._mdxIsPragmaComment
-    ) {
-      tree.comments.shift()
+    if (tree.comments) {
+      tree.comments = tree.comments.filter(function (d) {
+        return !d.data?._mdxIsPragmaComment
+      })
     }
 
     // When compiling to a function body, replace the import that was just
diff --git a/packages/mdx/readme.md b/packages/mdx/readme.md
index 09f7e7d1f..61cb4a46a 100644
--- a/packages/mdx/readme.md
+++ b/packages/mdx/readme.md
@@ -653,7 +653,8 @@ Configuration for `createProcessor` (TypeScript type).
 
   ```diff
   -import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime'
-  +/* @jsxRuntime automatic @jsxImportSource react */
+  +/*@jsxRuntime automatic*/
+  +/*@jsxImportSource react*/
 
   export function Thing() {
   -  return _jsx(_Fragment, {children: 'World'})
diff --git a/packages/mdx/test/compile.js b/packages/mdx/test/compile.js
index 7c73ace04..554082a3b 100644
--- a/packages/mdx/test/compile.js
+++ b/packages/mdx/test/compile.js
@@ -1154,7 +1154,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
     assert.equal(
       String(await compile('*a*', {jsx: true})),
       [
-        '/*@jsxRuntime automatic @jsxImportSource react*/',
+        '/*@jsxRuntime automatic*/',
+        '/*@jsxImportSource react*/',
         'function _createMdxContent(props) {',
         '  const _components = {',
         '    em: "em",',
@@ -1176,7 +1177,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
     assert.equal(
       String(await compile('<a {...b} c d="1" e={1} />', {jsx: true})),
       [
-        '/*@jsxRuntime automatic @jsxImportSource react*/',
+        '/*@jsxRuntime automatic*/',
+        '/*@jsxImportSource react*/',
         'function _createMdxContent(props) {',
         '  return <a {...b} c d="1" e={1} />;',
         '}',
@@ -1195,7 +1197,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
       assert.equal(
         String(await compile('<><a:b /><c.d/></>', {jsx: true})),
         [
-          '/*@jsxRuntime automatic @jsxImportSource react*/',
+          '/*@jsxRuntime automatic*/',
+          '/*@jsxImportSource react*/',
           'function _createMdxContent(props) {',
           '  const {c} = props.components || ({});',
           '  if (!c) _missingMdxReference("c", false);',
@@ -1219,7 +1222,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
     assert.equal(
       String(await compile('<>a {/* 1 */} b</>', {jsx: true})),
       [
-        '/*@jsxRuntime automatic @jsxImportSource react*/',
+        '/*@jsxRuntime automatic*/',
+        '/*@jsxImportSource react*/',
         '/*1*/',
         'function _createMdxContent(props) {',
         '  return <><>{"a "}{}{" b"}</></>;',
@@ -1239,7 +1243,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
       assert.equal(
         String(await compile('{<a-b></a-b>}', {jsx: true})),
         [
-          '/*@jsxRuntime automatic @jsxImportSource react*/',
+          '/*@jsxRuntime automatic*/',
+          '/*@jsxImportSource react*/',
           'function _createMdxContent(props) {',
           '  const _components = {',
           '    "a-b": "a-b",',
@@ -1261,7 +1266,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
     assert.equal(
       String(await compile('Hello {props.name}', {jsx: true})),
       [
-        '/*@jsxRuntime automatic @jsxImportSource react*/',
+        '/*@jsxRuntime automatic*/',
+        '/*@jsxImportSource react*/',
         'function _createMdxContent(props) {',
         '  const _components = {',
         '    p: "p",',
@@ -1289,7 +1295,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
           )
         ),
         [
-          '/*@jsxRuntime automatic @jsxImportSource react*/',
+          '/*@jsxRuntime automatic*/',
+          '/*@jsxImportSource react*/',
           'const MDXLayout = function Layout({components, ...props}) {',
           '  return <section {...props} />;',
           '};',
@@ -1320,7 +1327,8 @@ test('@mdx-js/mdx: compile (JSX)', async function (t) {
           })
         ),
         [
-          '/*@jsxRuntime automatic @jsxImportSource react*/',
+          '/*@jsxRuntime automatic*/',
+          '/*@jsxImportSource react*/',
           'import {useMDXComponents as _provideComponents} from "@mdx-js/react";',
           'function _createMdxContent(props) {',
           '  const _components = {',