Variable definition in MDX broken when referenced in Playground

[Dangoo]

Bug Report

The MDX docs state one should be able to declare variables within the MDX document through export like so:

import { Playground } from 'docz';

export const myVariable = 'Yay!'
# Hello, world!
<Playground>
  <div>{myVariable}</div>
</Playground>

To Reproduce

1. create-docz-app my-docz-app && cd my-docz-app
2. Change src/index.mdx to above example
3. Run npm run docz dev
4. See error in browser:

❌ Uncaught ReferenceError: myVariable is not defined

Expected behavior

It should render <div>Yay!</div> and variable myVariable should be available in Playground

[rakannimer]

Hey,

I added an empty line between the mdx and js lines and the code worked as expected.

Can you check : https://github.com/rakannimer/docz-issue-1247 ?

[Dangoo]

@rakannimer Thanks for creating that test case!
Had time to dig into the topic from there. My finding was that I missed the circumstance I had a wrapping <Playground> around my variable reference - and thats what actually makes the difference…

I updated the above example accordingly.

[thiagozf]

I wanted to use a variable to control state at my mdx story and ran into this issue. Found an alternative for this use case. I'm posting it here because it might help someone else. You can do something like this:

<Playground>
  {
    () => {
      const App = () => {
        const [open, setOpen] = React.useState(false)
        return (
          <>
            <Button onClick={() => setOpen(true)}>Notify</Button>
            <Snackbar
              open={open}
              onClose={() => setOpen(false)}
              message="My variable works!"
            />
          </>
        )
      }
      return <App />
    }
  }
</Playground>

Con of this approach is that the function is going to appear at the Playground code section, so the original issue is still relevant.

[rakannimer]

Hey all !

Thanks @thiagozf for your workaround, but as you said it doesn't allow to share code between playgrounds.

The problem wasn't with mdx parsing, the exports work as expected if you use them in JSX outside of the Playground component.

For example :

export const myVariable = 'Yay!'

# Hello, world!

<div>{myVariable}</div>

would work as expected.

But a different scope is provided inside the playground that didn't have access to exports in the mdx file.

I added all mdx exports to the Playground scope which should fix your use-case.

It will be released with the next docz version, meanwhile you can try it out with :

yarn add docz@next

You can also check out this repo for an example of using named exports and named function exports in playground that are defined in the mdx file :

https://github.com/rakannimer/docz-use-mdx-exports-in-playground

Example mdx :

Hello

export const myVariable = "Yay!";

export function b() {
  return "Hello";
}

# Hello, world!

<h2>{myVariable}</h2>

import { Playground } from "docz";

<Playground>
  <div>
    {myVariable}
    {b()}
  </div>
</Playground>

That should solve things for your use case right ?

Cheers !

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.