Admonitions with backticks elicit <mdxAdmonitionTitle /> warnings

[SheetJSDev]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

An admonition with backticks generates a warning e.g.

:::info Something `with` backticks

will elicit a warning

:::

Console warning:

Warning: The tag <mdxAdmonitionTitle> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
    at mdxAdmonitionTitle
    at eval (webpack-internal:///./node_modules/@mdx-js/react/dist/esm.js:154:30)
    at div
    at div
...

It does display what you would expect:

Reproducible demo

No response

Steps to reproduce

Create a blank site (or use docusaurus.new)

Add the following to /docs/intro.md:

:::info Something `with` backticks

will elicit a warning

:::

Load the intro page

Expected behavior

No warning

Actual behavior

warning (see description)

Your environment

Affects docusaurus.new CSB site on 2022-10-20 19:52 EDT

Self-service

• I'd be willing to fix this bug myself.

[Djunnni]

can i try this?
I can't reproduce

[SheetJSDev]

cd /tmp
npx create-docusaurus@latest my-website classic
## create-docusaurus@2.1.0
cd my-website
cat <<EOF >> docs/intro.md

:::info Something \`with\` backticks

will elicit a warning

:::
EOF
npm start

Now open the web browser and navigate to http://localhost:3000/docs/intro . Inspecting the console reveals the warning:

(note: this warning does not show up when building the production site)

package.json uses the following dependencies:

{
  "@docusaurus/core": "2.1.0",
  "@docusaurus/preset-classic": "2.1.0",
  "@mdx-js/react": "^1.6.22",
  "clsx": "^1.2.1",
  "prism-react-renderer": "^1.3.5",
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
}

[Djunnni]

thanks. i can try!

[Djunnni]

docusaurus/packages/docusaurus-mdx-loader/src/remark/admonitions/index.ts

Lines 141 to 159 in e411332

	children: [
	// For titles containing MDX syntax: create a custom element. The theme
	// component will extract it and render it nicely.
	//
	// Temporary workaround, because it's complex in MDX v1 to emit
	// interpolated JSX prop syntax (title={<>my <code>title</code></>}).
	// For this reason, we use children instead of the title prop.
	title &&
	!isSimpleTextTitle && {
	type: admonitionNodeType,
	data: {
	hName: 'mdxAdmonitionTitle',
	hProperties: {},
	},
	children: titleNodes,
	},
	...contentNodes,
	].filter(Boolean),
	};

#7152 (comment)
Temporary workaround, because it's complex in MDX v1 to emit.

maybe they will migrate mdx 2.0 then update this later