profile
viewpoint

Ask questionsMDX error: Support for the experimental syntax 'jsx' isn't currently enabled

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

storybookjs/storybook

Answer questions 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
useful!
source:https://uonfu.com/
Github User Rank List