WMR does not support `.mdx` files

[rschristian]

I'm looking to give XDM here a try with WMR, but am running into issues with loading .mdx or .md files, specifically the following:

Loading module from “http://localhost:3000/content/docs/foo.mdx” was blocked because of a disallowed MIME type (“text/mdx”).
Uncaught (in promise) TypeError: error loading dynamically imported module
Uncaught (in promise) TypeError: error loading dynamically imported module

Vague error message, but according to WMR's debug logs, it looks like the Rollup plugin isn't correctly handling the files and WMR is just serving the .mdx file directly. While I have no doubt that this is user error on my part, the ReadMe is 2400 lines long, full of expandable content sections, a maze of links back on itself, and no full samples. Reading through the Rollup, WMR, and Preact sections have me believing I just need to add the xdm/rollup.js plugin and set the jsxImportSource, but seemingly that doesn't result in a usable build.

// wmr.config.js
import { defineConfig } from 'wmr';
import xdm from 'xdm/rollup.js';

export default defineConfig({
    plugins: [
        xdm({ jsxImportSource: 'preact' }),
    ]
});

// bar.jsx
import Foo from './content/docs/foo.mdx';

export default function Bar() {
    return <Foo />;
}

// foo.mdx
## Hello world

<div class="foo">bar</div>

Having some examples would help massively in helping people get up and running (if they don't already exist somewhere), as the current ReadMe isn't really conducive to getting something usable.

As an API guide though, I don't believe I've seen anything more detailed, wow. Seriously impressive.

[wooorm]

I don’t think anyone has ever combined WMR with xdm yet: WMR says it supports Rollup plugins, so I that’s why I linked to that section. If this doesn’t work, it’s either a WMR error on their side, or something we can document here.

I’m guessing that WMR is compiling MDX -> JS, because it says Rollup plugins are supported. From that error, I think it’s not changing the file extension. You could assert whether the MDX -> JS part is working or not, by adding a console call in your node_modules here: https://github.com/wooorm/xdm/blob/bac5c48ae7eeccd5ae5abd133fac8c9e4824e48e/lib/integration/rollup.js#L36

From what I know of rollup plugins that work on different files (e.g., importing csv), that line should just work and Rollup should see the output as JS.

It might be something to raise with WMR folks.

[rschristian]

Ah, gotcha. I had assumed someone gave it a test, and that it was just user error in the config on my part somewhere.

Seems to be that the plugin never has access to the asset at all. Logging all the paths that flow through, the .mdx file does not show up. Interesting, probably something in WMR then.

It might be something to raise with WMR folks.

I conveniently help out over there, though I'm far from experienced with this sort of thing. I'll definitely bring it up, not sure if you want to close this out or not, certainly helped point me in the right direction. Thanks!

[wooorm]

To reproduce, do:

$ npm init wmr xdm-example
$ npm i xdm -D

Add to public/index.js:

import Content from './example.mdx';

Create public/example.mdx:

# Hello, world!

Change wmr.config.mjs:

import xdm from 'xdm/rollup.js';

export default function (config) {
    config.plugins.push(xdm());
}

Change node_modules/xdm/lib/integrations/rollup.js by adding on L32:

console.log('xxx:', path)

Start the WMR server, go to localhost:8080, and get:

xxx: ./style.css
xxx: ./index.js
xxx: ./pages/home/index.js
xxx: ./pages/_404.js
xxx: ./header.js
xxx: ./pages/home/style.module.css

And in the browser console:

TypeError: 'text/mdx' is not a valid JavaScript MIME type.

So WMR is not passing non-css/js files to Rollup. Which is a bug there.

I’d appreciate it if you could report that, or work on it yourself, so that it’s fixed in WMR!

[rschristian]

Late night here, but will do in the morning! Thanks for your help.

[wooorm]

Added a note to the readme for now!

[wooorm]

@rschristian I think I saw a PR saying this was now fixed? Is that released already? If so: would appreciate hearing how to set up WMR and what your experience with xdm is!

[rschristian]

@wooorm Apologies, forgot to return. Works great now!

Setting up a new project with WMR & XDM is super easy, all one needs to do is add the rollup plugin.

wmr.config.mjs

import { defineConfig } from 'wmr';
+import xdm from 'xdm/rollup.js';

// Full list of options: https://wmr.dev/docs/configuration
export default defineConfig({
    /* Your configuration here */
    alias: {
        react: 'preact/compat',
        'react-dom': 'preact/compat'
    },
+   plugins: [
+       xdm({ jsxImportSource: 'preact' })
+   ]
});

The only thing one needs to do is install xdm & add that diff to the wmr.config.mjs file that comes with newly created WMR projects. Then it's just standard module imports, import Foo from 'foo.mdx'; works great and as expected.

HMR doesn't work with updates to MD(X) files, but that's something for WMR to work on. Can't say I've noticed any other hiccups in the dev experience, the two work great.

I'll write up a quick PR for the docs now that it is supported.