diff --git a/docs/guides/mdx.md b/docs/guides/mdx.md
index a7b9ba78a18..cd3e06685bf 100644
--- a/docs/guides/mdx.md
+++ b/docs/guides/mdx.md
@@ -186,9 +186,7 @@ Clearly this is not a scalable solution for a blog with thousands of posts. Real
 If you wish to configure your own remark plugins you can do so through the `remix.config.js`'s `mdx` export:
 
 ```js filename=remix.config.js
-const {
-  remarkMdxFrontmatter,
-} = require("remark-mdx-frontmatter");
+import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 
 // can be an sync / async function or an object
 exports.mdx = async (filename) => {
diff --git a/packages/remix-dev/compiler/plugins/mdx.ts b/packages/remix-dev/compiler/plugins/mdx.ts
index 4548dfc4946..e197880f5ed 100644
--- a/packages/remix-dev/compiler/plugins/mdx.ts
+++ b/packages/remix-dev/compiler/plugins/mdx.ts
@@ -1,7 +1,6 @@
 import { promises as fsp } from "node:fs";
 import * as path from "node:path";
 import type * as esbuild from "esbuild";
-import { remarkMdxFrontmatter } from "remark-mdx-frontmatter";
 
 import { getLoaderForFile } from "../utils/loaders";
 import { createMatchPath } from "../utils/tsconfig";
@@ -70,6 +69,7 @@ export async function processMDX(
 ) {
   try {
     let fileContents = await fsp.readFile(absolutePath, "utf-8");
+    let remarkMdxFrontmatter = (await import("remark-mdx-frontmatter")).default;
 
     let rehypePlugins = [];
     let remarkPlugins: any[] = [
diff --git a/packages/remix-dev/package.json b/packages/remix-dev/package.json
index a1b38c76fcd..e349f89285a 100644
--- a/packages/remix-dev/package.json
+++ b/packages/remix-dev/package.json
@@ -69,7 +69,7 @@
     "pretty-ms": "^7.0.1",
     "react-refresh": "^0.14.0",
     "remark-frontmatter": "4.0.1",
-    "remark-mdx-frontmatter": "^1.0.1",
+    "remark-mdx-frontmatter": "^5.1.0",
     "semver": "^7.3.7",
     "set-cookie-parser": "^2.6.0",
     "tar-fs": "^2.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 09dd673ba22..c21d9c967ce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1064,8 +1064,8 @@ importers:
         specifier: 4.0.1
         version: 4.0.1
       remark-mdx-frontmatter:
-        specifier: ^1.0.1
-        version: 1.1.1
+        specifier: ^5.1.0
+        version: 5.1.0
       semver:
         specifier: ^7.3.7
         version: 7.5.4
@@ -8338,10 +8338,6 @@ packages:
       estree-walker: 3.0.0
     dev: false
 
-  /estree-util-is-identifier-name@1.1.0:
-    resolution: {integrity: sha512-OVJZ3fGGt9By77Ix9NhaRbzfbDV/2rx9EP7YIDJTmsZSEc5kYn2vWcNccYyahJL2uAQZK2a5Or2i0wtIKTPoRQ==}
-    dev: false
-
   /estree-util-is-identifier-name@2.1.0:
     resolution: {integrity: sha512-bEN9VHRyXAUOjkKVQVvArFym08BTWB0aJPppZZr0UNyAqWsLaVfAqP7hbaTJjzHifmB5ebnR8Wm7r7yGN/HonQ==}
     dev: false
@@ -8350,6 +8346,13 @@ packages:
     resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
     dev: false
 
+  /estree-util-scope@1.0.0:
+    resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==}
+    dependencies:
+      '@types/estree': 1.0.6
+      devlop: 1.1.0
+    dev: false
+
   /estree-util-to-js@1.2.0:
     resolution: {integrity: sha512-IzU74r1PK5IMMGZXUVZbmiu4A1uhiPgW5hm1GjcOfr4ZzHaMPpLNJjR7HjXiIOzi25nZDrgFTobHTkV5Q6ITjA==}
     dependencies:
@@ -8366,11 +8369,10 @@ packages:
       source-map: 0.7.3
     dev: false
 
-  /estree-util-value-to-estree@1.3.0:
-    resolution: {integrity: sha512-Y+ughcF9jSUJvncXwqRageavjrNPAI+1M/L3BI3PyLp1nmgYTGUXU6t5z1Y7OWuThoDdhPME07bQU+d5LxdJqw==}
-    engines: {node: '>=12.0.0'}
+  /estree-util-value-to-estree@3.3.3:
+    resolution: {integrity: sha512-Db+m1WSD4+mUO7UgMeKkAwdbfNWwIxLt48XF2oFU9emPfXkIu+k5/nlOj313v7wqtAPo0f9REhUvznFrPkG8CQ==}
     dependencies:
-      is-plain-obj: 3.0.0
+      '@types/estree': 1.0.6
     dev: false
 
   /estree-util-visit@1.2.1:
@@ -9751,11 +9753,6 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
-  /is-plain-obj@3.0.0:
-    resolution: {integrity: sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==}
-    engines: {node: '>=10'}
-    dev: false
-
   /is-plain-obj@4.0.0:
     resolution: {integrity: sha512-NXRbBtUdBioI73y/HmOhogw/U5msYPC9DAtGkJXeFcFWSFZw0mCUsPxk/snTuJHzNKA8kLBK4rH97RMB1BfCXw==}
     engines: {node: '>=12'}
@@ -13449,14 +13446,15 @@ packages:
       - supports-color
     dev: false
 
-  /remark-mdx-frontmatter@1.1.1:
-    resolution: {integrity: sha512-7teX9DW4tI2WZkXS4DBxneYSY7NHiXl4AKdWDO9LXVweULlCT8OPWsOjLEnMIXViN1j+QcY8mfbq3k0EK6x3uA==}
-    engines: {node: '>=12.2.0'}
+  /remark-mdx-frontmatter@5.1.0:
+    resolution: {integrity: sha512-F2l+FydK/QVwYMC4niMYl4Kh83TIfoR4qV9ekh/riWRakTTyjcLLyKTBo9fVgEtOmTEfIrqWwiYIm42+I5PMfQ==}
     dependencies:
-      estree-util-is-identifier-name: 1.1.0
-      estree-util-value-to-estree: 1.3.0
-      js-yaml: 4.1.0
+      '@types/mdast': 4.0.3
+      estree-util-value-to-estree: 3.3.3
       toml: 3.0.0
+      unified: 11.0.4
+      unist-util-mdx-define: 1.1.2
+      yaml: 2.3.4
     dev: false
 
   /remark-mdx@2.3.0:
@@ -14986,6 +14984,18 @@ packages:
       '@types/unist': 3.0.2
     dev: false
 
+  /unist-util-mdx-define@1.1.2:
+    resolution: {integrity: sha512-9ncH7i7TN5Xn7/tzX5bE3rXgz1X/u877gYVAUB3mLeTKYJmQHmqKTDBi6BTGXV7AeolBCI9ErcVsOt2qryoD0g==}
+    dependencies:
+      '@types/estree': 1.0.6
+      '@types/hast': 3.0.3
+      '@types/mdast': 4.0.3
+      estree-util-is-identifier-name: 3.0.0
+      estree-util-scope: 1.0.0
+      estree-walker: 3.0.0
+      vfile: 6.0.1
+    dev: false
+
   /unist-util-position-from-estree@1.1.2:
     resolution: {integrity: sha512-poZa0eXpS+/XpoQwGwl79UUdea4ol2ZuCYguVaJS4qzIOMDzbqz8a3erUCOmubSZkaOuGamb3tX790iwOIROww==}
     dependencies: