Need to upgrade to v1 of "@mdx-js/mdx" to render JSX mid-line

Currently JSX does not work in the middle of components with mdx-loader, because it is using an old version of @mdx-js/mdx.

This works

<span style={{ color: "red }}>I'm red</span>

But this doesn’t, it breaks the build 😢

I'm a paragraph in markdown <span style={{ color: "red" ]}>And I'm red</span>

This should be supported with mdx version 1

Upgrading to v1 of @mdx-js/mdx will fix this.

[adueck]

Ouch… but then this breaks something else. 😞 The files all load fine, front matter and everything comes through with the updated updated @mdx-js/mdx but then when you try to render the component from the import in React this happens:

Using my experimental updated forked version of mdx-loader:

import React from 'react';
/* eslint-disable import/no-webpack-loader-syntax */
import About from '!babel-loader!updated-mdx-loader!./content/intro/about.mdx';

function App() {
    return (
        <About />
    )
}

Error Message:

ReferenceError: mdx is not defined
MDXContent
http://localhost:3000/static/js/main.chunk.js:1260:3

...

> 1260 | return mdx(MDXLayout, Object.assign({}, layoutProps, props, {
       | ^  1261 |   components: components,
  1262 |   mdxType: "MDXLayout",
  1263 |   __source: { 

[adueck]

Ok I figured it out! 😄

With the new result that comes from @mdx-js/mdx v. 1, you need to include the following:

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

Now with my updated PR it works great. 👍