Problem compiling mxd for dynamic routes

[sullen heath]

Hi Guys - I have raised this question also at https://github.com/hashicorp/next-mdx-remote/issues/479

I am truing to build a website that process dynamic routes at compile time through a path blog/[...slug]/page.tsx. I am using the example code in the readme of next-mdx-remote that explains how to use the compile and run methods of @mdx-js/mxd.

The problem I am having is that importing components and compiling images is not working. Code like

import Image from "next/image";
import MyImage from "@/images/myimage.gif";

<Image src={MyImage} />

gives me errors like Did you mean to import "next/image.js" and Error: Unknown file extension ".gif" for ...

I am assuming that the inline complation is not properly configured. Is there any way to get it to pick up the same runtime configuration that npm run build is using? Or is there a better way to achieve what I'm trying to do.

Full code for the website (with broken code checked in for now) is available at https://github.com/m5p3nc3r/website/

[floral crypt]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[oak jasper]

Not sure if gifs are supported with nect/Image

[sullen heath]

The code works fine if I get the next compiler to build in a standard page.mdx. So I am assuming that gif's work fine.

[sullen heath]

Looking at the output of the compile stage, the imports are represented like this

const {default: Image} = await import(_resolveDynamicMdxSpecifier("next/image"));

With the resolve function looking like:

function _resolveDynamicMdxSpecifier(d) {
  if (typeof d !== "string") return d;
  try {
    new URL(d);
    return d;
  } catch {}
  if (d.startsWith("/") || d.startsWith("./") || d.startsWith("../")) return new URL(d, _importMetaUrl).href;
  return d;
}

It looks like the resolver would accept an object rather than a URL. So is it possible to get the compile stage to inflate the imports, or to turn the URL's into absolut file:/// based URLs? Because the compile stage must have to take into account the contents of tsconfig.json where it defines the path aliases.

[sullen heath]

So, I have worked out a solution to the problem, using a dynamic import https://github.com/m5p3nc3r/website/blob/6e20f370cb2af650de70545a8c8c1130cba8b229/src/lib/markdown_helper.tsx#L92.