Allow Image Extensions

• mdx-bundler version: 3.1.2
• node version: 14.9
• npm version: yarn

Relevant code or config

import { D3JS } from "@/lib/technologies";

export const meta = {
  title:
    "Add Interactivity to a Line Graph using scaleLinear.invert to Find a Data Point to Highlight on Mouse Move",
  description:
    "",
  type: "TUTORIAL",
  createdAt: "2018-03-20T01:58:20.594+00:00",
  technology: D3JS,
  tags: [],
  images: [require("./highlighted.png")],
};

What you did:

Attempted to add a plugin to resolve Attempted to supply to files

What happened: When supplied to files as a string

__mdx_bundler_fake_dir__/index.mdx:16:19: error: [JavaScript plugins] Invalid loader: "png" (valid: js, jsx, ts, tsx, css, json, text, base64, dataurl, file, binary)

Problem description:

In my MDX rather than using frontmatter I leverage a meta export, along with next-images + https://github.com/sergioramos/remark-copy-linked-files

This allows me to colocate all the things next to each other, and then they are processed into Next.js public directory and such.

However mdx-bunlder doesn’t let unknown files types fall through to potentially get resolved by a appended plugin

Suggested solution:

I don’t know?

Add in an optional way for unknown extensions to fall through to a future resolver?

[browniefed]

I think for image imports I ended up pre parsing from the document because in most cases it was in front matter then the remark image solution handles it for body images

[deadcoder0904]

Hahah, I’m just reading that thing for last couple of hours. I thought it’s different if it’s used in frontmatter vs the actual body but it looks like its the same.