MDX2 on Vite fails to execute createElement on Document

[Studio384]

I've been attempting to implement MDX2 on a React project built on top of Vite but keep running into the same issue. I've seen #1870 with the same problem, but that issue is about CRA and I cannot find a good answer there that is applicable to Vite.

For a repository that has this issue with only the necessary elements: https://github.com/Studio384/mindoc.

I'm receiving the following error:

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/src/docs/en/start/log-in.mdx') is not a valid name.
    at createElement (http://127.0.0.1:5173/node_modules/.vite/deps/react-dom_client.js?v=8203904a:7161:42)
    at createInstance (http://127.0.0.1:5173/node_modules/.vite/deps/react-dom_client.js?v=8203904a:7988:28)
    at completeWork (http://127.0.0.1:5173/node_modules/.vite/deps/react-dom_client.js?v=8203904a:15819:34)
    at completeUnitOfWork (http://127.0.0.1:5173/node_modules/.vite/deps/react-dom_client.js?v=8203904a:18719:24)
    at performUnitOfWork (http://127.0.0.1:5173/node_modules/.vite/deps/react-dom_client.js?v=8203904a:18701:13)
    at workLoopSync (http://127.0.0.1:5173/node_modules/.vite/deps/react-dom_client.js?v=8203904a:18632:13)
    at renderRootSync (http://127.0.0.1:5173/node_modules/.vite/deps/react-dom_client.js?v=8203904a:18611:15)
    at recoverFromConcurrentError (http://127.0.0.1:5173/node_modules/.vite/deps/react-dom_client.js?v=8203904a:18233:28)
    at performConcurrentWorkOnRoot (http://127.0.0.1:5173/node_modules/.vite/deps/react-dom_client.js?v=8203904a:18181:30)
    at workLoop (http://127.0.0.1:5173/node_modules/.vite/deps/react-dom_client.js?v=8203904a:197:42)

This is my vite.config.js file:

import mdx from '@mdx-js/rollup';
import ViteYaml from '@modyfi/vite-plugin-yaml';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), ViteYaml(), mdx()],
  assetsInclude: ['**/*.md', '**/*.mdx'],
  optimizeDeps: {
    include: ["react/jsx-runtime"],
  },
});

This is where the MDX file is loaded:

import { Container } from '@sippy-platform/mellow-ui';

import { MDXProvider } from '@mdx-js/react';

import Content from '../docs/en/start/log-in.mdx';

export default function Page() {
  return (
    <Container className="py-3">
      <MDXProvider>
        <Content />
      </MDXProvider>
    </Container>
  );
}

I'm using the latest version of all relevant packages:

{
  ...
  "type": "module",
  "scripts": {
    ...
  },
  "dependencies": {
    "@mdx-js/mdx": "^2.1.3",
    "@mdx-js/react": "^2.1.3",
    "@mdx-js/rollup": "^2.1.3",
    ...
    "react": "18.2.0",
    "react-dom": "18.2.0",
    ...
  },
  "devDependencies": {
    ...
    "@types/react": "18.0.17",
    "@types/react-dom": "18.0.6",
    "@vitejs/plugin-react": "2.0.1",
    ...
    "typescript": "4.7.4",
    "vite": "3.0.9"
  }
}

I hope someone can help me out with the problem. Thanks in advance.

[wooorm]

uhh that's not mdx 2 in your deps?

[wooorm]

Can you make a small reproduction that shows it? Remove everything that isn’t needed while still showing this error?

[Studio384]

This is a minimal reproduction of the issue: https://github.com/Studio384/mindoc

[wooorm]

Running npm run build or npm run preview there does not work. Can you make it work?

[Studio384]

npm run start does work and produces the issue. I have however now fixed npm run build as well. Thanks already for taking a look at it. :)

[wooorm]

Removing assetsInclude from vite’s config solves everything.
Vite injects crap apparently, if that is set.
I imagine the same to happen if you’d tell it that *.js is an asset instead of code.
Why are you setting that?