storybook: React: `_jsx is not defined` error

Adding this minimal /.storybook/.babelrc worked for me (using next.js):

// .babelrc
{
  "presets": ["next/babel"]
}

Same solution for me, but with a less duplicated configuration:

// ./.storybook/.babelrc

{
  "extends": "../.babelrc"
}

@sibelius Unfortunately, the problem has not been resolved.

I resorted to patching the babel config like so (in main.js):

  ...
  babel: (options) => {
    options.presets = options.presets.map((preset) => {
      if (Array.isArray(preset) && preset[0].includes('@babel/preset-react')) {
        return [require.resolve('@babel/preset-react'), {runtime: 'classic'}]
      }

      return preset
    })

    return options
  },
  ...

I’m experiencing this with v6.1.6 and I found this issue while sorting through an issue of my own.

I used @DiFuks’s example, and also needed a workaround from Chakra’s own repo. I was able to remove the duplicate .babelrc from the .storybook directory, and I no longer need to use --no-dll.

Below is my main.js file, and this is the minimum I found required for me to get storybook working without the _jsx issue.

const path = require('path')

const toPath = (_path) => path.join(process.cwd(), _path)

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-addon-playroom',
    '@storybook/addon-a11y',
    '@storybook/addon-storysource',
    'storybook-addon-designs',
    '@storybook/addon-actions',
  ],

  // ! Taken from Storybook issue workaround
  // ! See: https://github.com/storybookjs/storybook/issues/12952#issuecomment-719871776
  babel: async (options) => ({
    ...options,
    plugins: [...options.plugins, '@babel/plugin-transform-react-jsx'],
  }),

  // ! Taken from Chakra's Storybook + Emotion 11 workaround
  // ! See: https://github.com/chakra-ui/chakra-ui/pull/2466/files#diff-cafe2123a72c4ce3a9f7e9ee4b0e188256eb02d7ec1e54fa2cadfac99b22f92b
  webpackFinal: async (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@emotion/core': toPath('node_modules/@emotion/react'),
          'emotion-theming': toPath('node_modules/@emotion/react'),
        },
      },
    }
  },
}

Adding this minimal /.storybook/.babelrc worked for me (using next.js):

// .babelrc
{
  "presets": ["next/babel"]
}

"@storybook/addon-actions": "^6.1.5",
"@storybook/addon-essentials": "^6.1.5",
"@storybook/addon-links": "^6.1.5",
"@storybook/react": "^6.1.5",

I have the same issue.

The solution for me - just to copy the .babelrc file into .storybook folder. E.g.: cp .babelrc .storybook/

BTW, I have tried to upgrade a storybook version via npx sb upgrade, but, actually, helpless.

@shilman @DiFuks I had the same issue (_jsx is not defined).

Copying <root>/.babelrc to <root>/.storybook/.babelrc did help. I use next, btw.

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": ["react-require"]
}

Storybook version is @storybook/react v6.1.0-alpha.35 Next version is 10.0.1 React version is 17.x

============ Btw, I don’t use --no-dll flag, but it’s still yelling about (node:8752) DeprecationWarning: DLL-related CLI flags are deprecated, see: %url%. What’s wrong with this deprecaation?

@Fi1osof I’m seeing a slightly different error which is _jsxs is not defined. Can you confirm? Also which version of npm are you using?

Does anybody have a repro they can share with 6.1.6? I’m unable to repro the above on my machine.

@shilman here: https://github.com/prisma-cms/component-boilerplate/tree/76d2516757491068c3cfc1df5dc143ef69437b73 For repro error please remove .storybook/.babelrc

@nandosangenetto i think this is unrelated to #12881, or only tangentially related. i copied .babelrc into the .storybook directory and the error went away. LMK if that works for you.

i did, however, see something very troubling, which is:

• i tried modifying the main.js config to remove the addons (which you also tried)
• i rebuilt storybook-static and the addons were still being installed
• i tried messing around including deleting node_modules/.cache and rebuilding storybook-static

in the end deleting node_modules, reinstalling, and rebuilding worked. i’ve never seen this before, and i didn’t have time to follow up. is there anything special about your project that might cause this?