Storybook: MDX error: Support for the experimental syntax 'jsx' isn't currently enabled

[shilman]

A recent change in babel has broken Storybook's MDX configuration in CRA, with the error: Support for the experimental syntax 'jsx' isn't currently enabled.

More info here: https://github.com/storybookjs/storybook/pull/11422#issuecomment-653939846

This is reproducible in a fresh CRA install, and the problem is present on both next and latest branches, unrelated to any code changes on our side.

cc @tooppaaa @ndelangen

[shilman]

There are two workarounds for this issue. For React projects (e.g. CRA) that have the following line in their main.js:

module.exports = {
  addons: [
    '@storybook/addon-docs'
  ]
};

Update to:

module.exports = {
  addons: [
    {
       name: '@storybook/addon-docs',
       options: { configureJSX: true }
    }
  ]
};

If you use <>blah</> style fragments in your MDX, this will unlock a second bug (presumably from the same underlying source): transform-react-jsx: pragma has been set but pragmaFrag has not been set.

For now, the workaround is to rewrite those fragments as <React.Fragment>blah</React.Fragment>.

We're working on:

1. A better workaround for the fragment issue
2. A proper fix to both issues

[shilman]

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.45 containing PR #11448 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.20 containing PR #11448 that references this issue. Upgrade today to try it out!