Contents of <div> element in .mdx file is wrapped in <p>, is this by design?

[gregorfelkar]

I have a question why following html in *.mdx file:

# Title

paragraph

<div className="no-issue">No issues if no sub-elements in div</div>

<div className="issue">
  This and all sub-elements get wrapped in additional paragraph
  <div className="issue">
    And React complains that div element cannot be descendat to paragraph element
  </div>
</div>

Gets converted to:

<h1>Title</h1>
<p>paragraph</p>
<div class="no-issue"> No issues if no sub-elements in div</div>
<div class="issue">
  <p>
    "This and all sub-elements get wrapped in additional paragraph "
    <div class="issue">And React complains that div element cannot be descendat to paragraph element</div>
  </p>
</div>

This will yied an error in Next.js Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.. I also tried to run the same example in https://mdxjs.com/playground/ but there it will render a bit different:

<h1>Title</h1>
<p>paragraph</p>
<div class="no-issue"> No issues if no sub-elements in div</div>
<div class="issue">
  <p>This and all sub-elements get wrapped in additional paragraph</p>
  <div class="issue">
    <p>And React complains that div element cannot be descendat to paragraph element</p>
  </div>
</div>

Notice that only text is wrapped into <p> element.

Neither situation is what i want, i would like that MDX lib ignores html and leaves it as it is. What am i missing?

I'm using simple Next.js config:

import NextMDX from "@next/mdx";
import remarkGfm from "remark-gfm";
import remarkFrontmatter from "remark-frontmatter";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  env: {
    markdownPath: "posts",
    markdownLearnPath: "posts/learn",
  },
};

const withMDX = NextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkFrontmatter, remarkGfm],
    providerImportSource: "@mdx-js/react",
  },
});

export default withMDX({
  ...nextConfig,
  pageExtensions: ["tsx", "md", "mdx"],
});

Other than that i have _app.tsx file:

import { AppProps } from "next/app";
import { MDXProvider } from "@mdx-js/react";
import Layout from "../Layout/Layout.component";
import "../styles/globals.scss";

const components = {};

const App: React.FC<AppProps> = ({ Component, pageProps }: AppProps) => {
  return (
    <Layout>
      <MDXProvider components={components}>
        <Component {...pageProps} />
      </MDXProvider>
    </Layout>
  );
};

export default App;

And text.mdx file in pages folder:

---
title: Test
---

# Title

paragraph

<div className="no-issue">No issues if no sub-elements in div</div>

<div className="issue">
  This and all sub-elements get wrapped in additional paragraph
  <div className="issue">
    And React complains that div element cannot be descendat to paragraph element
  </div>
</div>

Here is my package.json:

{
  "name": "test_app_mdx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@mdx-js/loader": "^2.1.5",
    "@mdx-js/react": "^2.1.5",
    "@next/mdx": "^13.0.6",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
    "eslint": "8.27.0",
    "eslint-config-next": "13.0.3",
    "gray-matter": "^4.0.3",
    "next": "13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "remark-frontmatter": "^4.0.1",
    "remark-gfm": "^3.0.1",
    "typescript": "4.9.3"
  },
  "devDependencies": {
    "sass": "^1.56.1"
  }
}

I was trying to search for this on web but i found nothing, so my question is:

• Is this behaviour by design and why?
• How can i tell MDX to not change html parts in mdx?
• How to at least achive the same result as in mdx playground?

Thanks in advance.

[remcohaszing]

The children of MDX elements are also MDX.

<div>
  You **can** you _markdown_ here.

  Including <span>more MDX</span>
</div>

You can avoid this behaviour by wrapping the JSX syntax inside an expression.

{
  <div>
    This is **raw** _unprocessed_ text.

    <span>JSX works the same way you would write it in a JavaScript / Typecript file</span>
  </div>
}

[gregorfelkar]

Thanks you are a life saver! But i'll mark @ChristianMurphy answer as it is a bit more detailed. Thanks again!

[ChristianMurphy]

Sorry you ran into some confusion @gregorfelkar.
This behavior is expected and follows the rules of Markdown and JSX.
If you haven't read https://mdxjs.com/docs/what-is-mdx/ yet, start here, then continue with the following.

MDX is Markdown + JSX.
There is no HTML syntax parsing involved, and using HTML's line break and block definitions as a mental model will cause further confusion.

What is most relevant here are markdown's content rules, the rule of thumb there, if things are on a single line and can be wrapped by other things, they are inline content.
If things cross multiple lines and cannot be wrapped by other things, they are a block.

The following is inline

<div className="no-issue">No issues if no sub-elements in div</div>

it is on a single line, and it can have text and other markdown content before or after it.
As inline content it can be wrapped in a paragraph as a whole, but it's inner content will not.

The following is are blocks, they will not have a wrapping paragraphs around them.
But inside they re-enter markdown and have some inlines which can/will have wrapping paragraphs

<div className="issue">
  This and all sub-elements get wrapped in additional paragraph
  <div className="issue">
    And React complains that div element cannot be descendat to paragraph element
  </div>
</div>

blocks span multiple lines, and cannot have text before the opening tag or after the closing tag.

As @remcohaszing notes in the above post, if you want to create a block where an inline would usually appear JSX {} can be used to blockify it.

# Title

paragraph

<div className="no-issue">No issues if no sub-elements in div</div>

{
  <div className="issue">
    This and all sub-elements do not get wrapped in additional paragraph
    <div className="issue">
      and this is fine as well
    </div>
  </div>
}

[gregorfelkar]

Thanks for detailed explanation! Now it works as expected.