In the Getting Started documentation of mdxjs.com we see the following documentation:
Defining variables with exports
If you need to define a variable in your MDX document, you can use an export to do so. Not only do exports emit data, they instantiate data you can reference in JSX blocks:
export const myVariable = 'Yay!'
# Hello, world!
<div>{myVariable}</div>
However if we copy that code and paste it into the playground: https://mdxjs.com/playground, it fails with ReferenceError: myVariable is not defined
.
I'm running into the same issue when I try to import an MDX document into my nextjs app.
This works:
Sentence with details about <Text product={product}/>
Where <Text/>
is simply a dummy component:
const Text = ({ product }) => {
return (
<>{product}</>
)
}
But I shouldn't have to do the above. I simply want my MDX to look like this:
Sentence with details about {product}
Am I missing something here?
Appreciate your help!