addon-docs 5.3.21 - react 17 - pragma and pragmaFrag cannot be set when runtime is automatic.

Describe the bug A clear and concise description of what the bug is. I upgraded a project to react 17, and when I start storybook(5.3.21) I get the following only on mdx files:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/kelly/tock/admin/consumer/stories/guides/TypographyGuide.stories.mdx: pragma and pragmaFrag cannot be set when runtime is automatic.

To Reproduce Steps to reproduce the behavior:

1. Go to ‘…’
2. Click on ‘…’
3. Scroll down to ‘…’
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets If applicable, add code samples to help explain your problem. it seems to be with this part of the webpack config:

{
        test: /\.(stories|story).mdx$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: '/Users/kelly/tock/admin/consumer/node_modules/.cache/storybook',
              presets: [
                [
                  '/Users/kelly/tock/admin/consumer/node_modules/@babel/preset-env/lib/index.js',
                  {
                    shippedProposals: true,
                    useBuiltIns: 'usage',
                    corejs: '3'
                  }
                ],
                '/Users/kelly/tock/admin/consumer/node_modules/@babel/preset-react/lib/index.js',
                '/Users/kelly/tock/admin/consumer/node_modules/@babel/preset-flow/lib/index.js'
              ],
              plugins: [
                '/Users/kelly/tock/admin/consumer/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                '/Users/kelly/tock/admin/consumer/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                '/Users/kelly/tock/admin/consumer/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                [
                  '/Users/kelly/tock/admin/consumer/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
                  { sourceMap: true, autoLabel: true }
                ],
                '/Users/kelly/tock/admin/consumer/node_modules/babel-plugin-macros/dist/index.js',
                '/Users/kelly/tock/admin/consumer/node_modules/@babel/plugin-transform-react-constant-elements/lib/index.js',
                '/Users/kelly/tock/admin/consumer/node_modules/babel-plugin-add-react-displayname/index.js',
                [
                  '/Users/kelly/tock/admin/consumer/node_modules/babel-plugin-react-docgen/lib/index.js',
                  {
                    DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
                  }
                ],
                [
                  '@babel/plugin-transform-react-jsx',
                  {
                    pragma: 'React.createElement',
                    pragmaFrag: 'React.Fragment'
                  }
                ]
              ]
            }
          },

System Please paste the results of npx sb@next info here. Environment Info:

System: OS: macOS 10.15.7 CPU: (8) x64 Intel® Core™ i7-7820HQ CPU @ 2.90GHz Binaries: Node: 14.12.0 - ~/.nvm/versions/node/v14.12.0/bin/node Yarn: 1.22.5 - ~/.yarn/bin/yarn npm: 6.14.8 - ~/.nvm/versions/node/v14.12.0/bin/npm Browsers: Chrome: 87.0.4280.88 Edge: 87.0.664.57 Firefox: 80.0 Safari: 14.0.1 npmPackages: @storybook/addon-a11y: 5.3.21 => 5.3.21 @storybook/addon-actions: 5.3.21 => 5.3.21 @storybook/addon-console: ^1.2.2 => 1.2.2 @storybook/addon-docs: 5.3.21 => 5.3.21 @storybook/addon-knobs: 5.3.21 => 5.3.21 @storybook/addon-links: 5.3.21 => 5.3.21 @storybook/addon-storysource: 5.3.21 => 5.3.21 @storybook/addon-viewport: 5.3.21 => 5.3.21 @storybook/addons: 5.3.21 => 5.3.21 @storybook/react: 5.3.21 => 5.3.21 Additional context Add any other context about the problem here.

[markahon]

I bumped into this when running my tests. It started occurring also after adding snapshot tests to my CRA build. Also

"react": "^16.14.0",

Workaround: Disable the “new” jsx transform by adding the DISABLE_NEW_JSX_TRANSFORM flag to .env file:

DISABLE_NEW_JSX_TRANSFORM=true

[mikkopori]

Hello,

I’m running into this issue using:

"react": "^16.14.0", and

    "@storybook/addon-actions": "^6.1.17",
    "@storybook/addon-essentials": "^6.1.17",
    "@storybook/addon-links": "^6.1.17",
    "@storybook/addon-storyshots": "^6.1.17",
    "@storybook/node-logger": "^6.1.17",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "^6.1.17",

when running snapshot-test for the first time with:

npm test

producing

 FAIL  src/storybook.test.js
  ● Test suite failed to run

    SyntaxError: /home/mpori/tg-portal_repo/node_modules/@storybook/addon-storyshots/dist/frameworks/preact/loader.js: pragma and pragmaFrag cannot be set when runtime is automatic.
    > 1 | "use strict";
        | ^
      2 | /** @jsx h */
      3 | var __assign = (this && this.__assign) || function () {
      4 |     __assign = Object.assign || function(t) {

      at File.buildCodeFrameError (node_modules/@babel/core/lib/transformation/file/file.js:250:12)
      at NodePath.buildCodeFrameError (node_modules/@babel/traverse/lib/path/index.js:138:21)
      at PluginPass.enter (node_modules/@babel/plugin-transform-react-jsx/lib/create-plugin.js:163:28)
      at newFn (node_modules/@babel/traverse/lib/visitors.js:175:21)
      at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:55:20)
      at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:42:17)
      at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:92:31)
      at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:116:16)
      at TraversalContext.visitSingle (node_modules/@babel/traverse/lib/context.js:85:19)
      at TraversalContext.visit (node_modules/@babel/traverse/lib/context.js:144:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.432 s
Ran all test suites related to changed files.

Watch Usage
 › Press a to run all tests.
 › Press f to run only failed tests.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.