Weird behaviour with ampersand(&) keyword in urls

[xoldd]

The following mdx

[this is a link](https://pbs.twimg.com/media/F6FamBAWIAE3HrA?format=png&name=small)

is outputted as following html

<img src="https://pbs.twimg.com/media/F6FamBAWIAE3HrA?format=png&amp;name=small" alt="test">

You see the & to & keyword change? That's causing the image to not render on screen because browser doesn't understand it. Is this a bug or am I doing something wrong here?

I'm using nextjs mdx btw.

[ChristianMurphy]

Welcome @xoldyckk! 👋
Sorry you ran into a spot of trouble.
MDX does not do that, take your example and run it in the playground https://mdxjs.com/playground/

[this is a link](https://pbs.twimg.com/media/F6FamBAWIAE3HrA?format=png&name=small)

produces the React component:

/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    p: "p",
    ...props.components
  };
  return _jsx(_components.p, {
    children: _jsx(_components.a, {
      href: "https://pbs.twimg.com/media/F6FamBAWIAE3HrA?format=png&name=small",
      children: "this is a link"
    })
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};

📓 note that there is no modification to the encoding

---

It is likely another transform or library in your application modifying the URL.

[wooorm]

Importantly, that transform doesn't break anything. Browsers do understand it, in fact they want it. If your image is broken, that's because something else. Using & amp; is fine.

[xoldd]

@wooorm The image that works is normally rendered without a mdx -> html compilation step. The second image doesn't because it has the image url modified with & instead of just & search param seperator symbol.

[wooorm]

You don’t use an image in markdown. You us a link. So it is a link... link: [text](url), image: ![text](url)

[xoldd]

@wooorm my bad, fixed it check again, it still doesn't work.

[ChristianMurphy]

@xoldyckk Focus on creating a minimal reproducible example https://stackoverflow.com/help/minimal-reproducible-example
When I took the sandbox you shared, and pulled out tailwind and the experimental next options, then added the recommended options from https://mdxjs.com/docs/getting-started/#nextjs

It does renders with & instead of & https://codesandbox.io/p/sandbox/nextjs-mdx-forked-k7l629?file=/next.config.mjs:10,1

You are welcome to tinker around and try to figured out which extra layer you added was the precise root cause of &.
But MDX and @next/mdx work fine when using the default/recommended configuration.

[xoldd]

Okay found the issue. It is because of the experimental rust compiler. They've used it in their docs directly, so I just copy pasted it. Without that option enabled the image link compiles correctly. This thing:-

const nextConfig = {
  experimental: {
    mdxRs: true,
  },
}

Anyway thanks for the help, i'll open an issue for this on their repo.

[wooorm]

hmm, I also maintain mdxjs-rs. So maybe the issue is there? Or in SWC? Dunno!