Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow Image Extensions

See original GitHub issue
  • 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 = {
    "Add Interactivity to a Line Graph using scaleLinear.invert to Find a Data Point to Highlight on Mouse Move",
  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 +

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?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

browniefedcommented, Jul 8, 2021

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

deadcoder0904commented, Jul 8, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

About image assets - Google Ads Help
Image assets allow advertisers to upload rich, relevant visuals to complement their existing text ads. ... File formats: PNG, JPG static GIF.
Read more >
10 Types of Image File Extensions and When to Use Them
JPEG, GIF, and PNG are all raster image extensions. ... These image files actually allow for extensive editing without changing file types, ...
Read more >
Image file type and format guide - Web media technologies
In this guide, we'll cover the image file types generally supported ... Firefox 77 to 92 require the preference image.avif.enable set true ....
Read more >
The Complete Image File Extension List for Developers
We have created a complete list of image file extension types for you ... JPGs use lossy compression, which allows for a reduced...
Read more >
The Easy Guide to Google Ads Image Extensions - WordStream
The easiest way to get images in place for ad extensions is simply to upload an image from your computer. Website scan. Just...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found