Inline code always shows up as the word children for me

[kevinb-khan]

The following .mdx:

<div style={{backgroundColor: 'violet', padding: '1rem'}}>
  Try and change the background color to `tomato`.
</div>

gets rendered as:

I tried searching for an existing issue, but couldn't find anything. As a workaround I can do <code>tomato</code>.

My entry point looks like:

import React from "react";
import ReactDOM from "react-dom/client";

import Routes from "./routes";

ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <Routes />
    </React.StrictMode>,
);

and my vite.config.ts looks like:

import {defineConfig} from "vite";
import react from "@vitejs/plugin-react-swc";
import mdx from "@mdx-js/rollup";
import remarkGfm from "remark-gfm";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [mdx({remarkPlugins: [remarkGfm]}), react()],
});

I'm using the following mdx related deps:

    "@mdx-js/rollup": "^3.0.1",
    "remark-gfm": "^4.0.0"

[ChristianMurphy]

Welcome @kevinb-khan! 👋
Could you share a complete example inside a sandbox?
It's unclear what other versions of tools and what kind of routing is being used, and if those could be influencing the outcome.
https://vite.new/react or https://vite.new/react-ts could be a good starting point for sharing the example.