Next.js Discord

Discord Forum

Problem compiling mxd for dynamic routes

Unanswered
English Spot posted this in #help-forum
Open in Discord
Avatar
English SpotOP
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/

5 Replies

Avatar
Australian Freshwater Crocodile
Not sure if gifs are supported with nect/Image
Avatar
English SpotOP
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.
Avatar
English SpotOP
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.
Avatar
English SpotOP
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.
But I am still confused as to why the compile/run code did not work...