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

[kelly-tock]

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(R) Core(TM) 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.

[shilman]

You need to upgrade to 6.1

npx sb upgrade

https://storybook.js.org/blog/storybook-6-migration-guide/

[kelly-tock]

I have been holding off on that due to all the Core js issues on projects with core js 2, etc. I think I can patch the webpack injected Babel loader. Once the new patch is released for the sb issues I will definitely try it.

[shilman]

What patch are you referring to?

[kelly-tock]

#11255

[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.

[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

[eranimo]

The above doesn't work unless you are using create-react-app.

It looks like this bug completely breaks addon-docs? This should probably get fixed?

[eranimo]

This is still happening in 6.5.16

[valentinpalkovic]

Can someone provide a reproduction for Storybook 7.x?

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.