Scope data is not being converted into corresponding values

[kamal-choudhary]

Hi, thank you so much for the awesome package.

I am practicing with the very basic example that is there in the README file.

Here is the code I am using:

import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";

const data = { product: "next" };

export default function TestPage({ source }) {
  console.log("source object received", source);
  return (
    <div className="wrapper">
      <MDXRemote {...source} />
    </div>
  );
}

export async function getStaticProps() {
  const source = "Some **mdx** text with some data: {product}";
  const mdxSource = await serialize(source, { scope: data });
  return { props: { source: mdxSource } };
}

The problem is that the "product" variable is not being converted into its corresponding value i.e. "next". I am getting the exact same string on the front end.

This is what is rendered on screen: "Some mdx text with some data: {product}"

Although when I see the result of the console statement, the scope object is there and it does contain the value of "product".

P.S. I am relatively new to NextJS and English is also not my first language. Please pardon me if this is a noob's question.

[jescalan]

The scope data for some reason is only made available when passed into components, you can't render it straight into text in this way.

So if you had as your source, for example, "Some **mdx** text with some data: <MyComponent prop={product} />", this would be passed through in the way you expect.

I'm not sure why this is the case, but its the way that this version of mdx works

[kamal-choudhary]

Hi Jeff, thank you for the quick reply. Yes, it worked as you described. Thanks!!!

[bobbyflowstate]

Is this expected for MDX long term? According to the docs (https://mdxjs.com/getting-started#hello-world) in the "Defining variables with exports" section the first version @kamal-choudhary had ("Some **mdx** text with some data: {product}") should work.

If this is not the case, then I have to create a dummy text component like so:

const Text = ({ text }) => {
    return (
        <>{text}</>
    )
}

[bobbyflowstate]

I'm also having to do very cumbersome things like this:

<Anchor href={productUrl} target="_blank"><Text text={product}/></Anchor>

Again, at the top of the mdxjs.com page, under Components section it states that we can do things like this:

import { Box, Heading, Text } from 'rebass'

# Here is a JSX block

It is using imported components!

<Box>
  <Heading>Here's a JSX block</Heading>
  <Text>It's pretty neat</Text>
</Box>

So I would think the following should work:

<Anchor href={productUrl} target="_blank">{product}</Anchor>

but this just leaves the {product} text as is and does not replace it with the variable value.

So as stated above, I have to use the dummy Text component.

Really feels like this is a bug, but correct me if I'm mistaken.

[jescalan]

For the first example, I would welcome anyone to look into it, but we have mdx rendering the content with the scope variable, and that is what it does. It would be cool if it was able to render straight jsx in the middle of text, if anyone wants to poke around in the code and see if they can get it to work, that would be lovely!

For the second example, this library is specifically designed to be able to load mdx from anywhere - it does not have to be from a local file, it could be from a remote repository, database, etc. Therefore, we cannot by default resolve individual imports. This is quite clear in the readme. There's another library called mdx-bundler that does support individual imports which you are welcome to check out if this is functionality you need.

[bobbyflowstate]

Appreciate the response @jescalan. The first example is what I care about.

The second example I provided is unfortunately confusing and that's my fault. I'm not concerned about the imports.

Curious as to why MDX is failing to render when a variable sits in between JSX.

I was actually trying this out on the playground: https://mdxjs.com/playground/, with the following code:

export const myVariable = 'Yay!'

# Hello, world!

<div>{myVariable}</div>

I got the error: myVariable is not defined.

So maybe a bug in MDX?

[jescalan]

Oh interesting - if that example doesn't even work on their playground it may in fact be an issue with mdx itself as you said.

It's worth noting that mdx right now is sort of in a weird state - there is a v2 branch which has been long in development and seems to potentially have stalled out in a perpetual beta state. There's a PR here that upgrades to it anyway, if you want to check that out and see if it solves the problem. Also, one of the authors of MDX made a fork called xdm that is quite similar which we made an experimental branch to support, but this branch is off the previous version of next-mdx-remote, so trying it out would require changing the api a little bit.

I'm not really thrilled about the whole situation with mdx's development and have done some asking around from time to time, but I haven't really got too far unfortunately. I think probably at this point the most promising move for you would be to test the mdx v2 branch and see if this behavior is any different.

[Ehesp]

As far as I'm aware, this plugin and the v2 version (in PR) strips out all export/import nodes, so I believe this would have the same problem.

[jescalan]

@Ehesp Sort of - we're not talking specifically about imports and exports here though, we're talking about the scope argument and how that works. The example with the export in the above comment was just a way to demonstrate the issue within the scope of the online mdx playground.

[bobbyflowstate]

Ah cool. Thanks for the details @jescalan . Much appreciated. When I get a chance I'll check out the v2 branch. For now the workaround of using <Text text={myVar}/> does the trick. Will let you know if I learn of anything else.

[jescalan]

@rajuashok for sure - thats definitely a really annoying and unideal workaround though, hopefully it can be avoided soon!