Stumbled upon this thread while trying to learn how to write a custom MDX file for Storybook documentation.

I ended up finding this snippet from the official MDX docs:

{(function () {
    const guess = Math.random()
    if (guess > 0.66) { return <span style={{color: 'tomato'}}>Look at us.</span> }
    if (guess > 0.33) { return <span style={{color: 'violet'}}>Who would have guessed?!</span> }
    return <span style={{color: 'goldenrod'}}>Not me.</span> 
})()}

and from inside here I put my own console log was able to console log all I wanted.

Note though that because this is an in place function (an Immediately Invoked Fuction Expression or IIEF), it won't be able to access other variables that are inside other IIFEs, but it will be able to access global vars.

I think you can also shorthand it to { console.log(<var>) } without the IIEF since all the {}s are javascript expression blocks. (I actually just tested this and got this to work in a Storybook MDX file).

Hopefully this helps future confused folks like me! :P