fix(dev): update remark-mdx-frontmatter

Author: MichaelDeBoey

Diff for: 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 for: 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 for: 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",