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

[adueck]

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: { 

[jamesknelson]

I haven't been keeping up with API changes lately, but looking at the error, it looks like you'll need to change the existing imports from:

import { MDXTag } from '@mdx-js/tag'

https://github.com/adueck/updated-mdx-loader/blob/master/index.js#L48

to something that imports an mdx function.

If you can get this working I'm more than happy to merge it!

[adueck]

@jamesknelson Hmm, looking back the error message I gave may have been misleading:

I clicked the 'view compiled' button below the red error message from webpack, and got that. The actual error message as it first comes was:

This might be over my level to get this working...

It would be really, really wonderful if this package could be updated to work with the new stable mdx (and mid-markdown JSX), because as you explained so well here there's nothing quite like this out there! 🙇

Thanks for your super helpful work!

[adueck]

The issue seems to be that with v1 of @mdx-js/mdx await mdx(mdxContent, options) returns a quite different result

given a markdown file of:

This is a markdown paragraph

using @mdx-js/mdx v 0.16.0 result is: (This renders fine)

const layoutProps = {
  
};
export default class MDXContent extends React.Component {
  constructor(props) {
    super(props)
    this.layout = null
  }
  render() {
    const { components, ...props } = this.props

    return <MDXTag
             name="wrapper"
             
             components={components}><MDXTag name="p" components={components}>{`I’m a markdown paragraph`}</MDXTag>
           </MDXTag>
  }
}

And using the new @mdx-js/mdx v. 1.0.20 result is: (this breaks things)

/* @jsx mdx */


const makeShortcode = name => function MDXDefaultShortcode(props) {
  console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
  return <div {...props}/>
};

const layoutProps = {
  
};
const MDXLayout = "wrapper"
export default function MDXContent({
  components,
  ...props
}) {
  return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
    <p>{`I’m a markdown paragraph`}</p>
    </MDXLayout>;
}

So how to adjust things so that this new result can get rendered properly? I'm stuck. 🤔

[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. 👍