Storybook: React: `_jsx is not defined` error

[shilman]

_Originally posted by @nandosangenetto in https://github.com/storybookjs/storybook/issues/12881#issuecomment-718969472_

I'm getting the same error that @DiFuks is getting, _jsx is not defined.

I've created a small repo where you can reproduce this bug: https://github.com/nandosangenetto/storybook-bug-repro

I've tried to remove all addons, as @DiFuks did, but it didn't work.

What is odd is that it works when I run npm run storybook (start-storybook -p 6006), but fails when I try to build it with npm run build-storybook (build-storybook).

[shilman]

@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?

[nandosangenetto]

I cannot recall anything special. I'll copy the .babelrc file into the .storybook directory to see if it builds successfully in our CircleCI step. I'm going to let you know if it works.

Let me ask you, what node and npm version are you using?

[nandosangenetto]

@shilman, Although it's building, I cannot switch between stories/templates. Is it working for you?

I recorded a video showing it, the only way I could change the component was by refreshing the page, since it was changing the URL but not the canvas. Video: https://youtu.be/nqQvtZNo6Yc

[shilman]

Try building with --no-dll

[nandosangenetto]

Thank you @shilman! It worked! 🎉

Just to recap, the solution was to copy the .babelrc file into .storybook folder, and build the Storybook with --no-dll option.

[DiFuks]

@shilman Yes, It worked. But I don't understand why it worked. My .babelrc

{
  "presets": ["next/babel"],
  "env": {
    "development": {
      "plugins": ["@babel/plugin-transform-react-display-name"]
    }
  }
}

_Edit_ I tried to build with this .babelrc 😅:

{}

But this didn't work - the build finished successfully, but the components weren't in the storybook. Apparently the next/babel preset includes some of the plugins needed to build the storybook

_Edit_
Maybe it's the plugin: https://babeljs.io/docs/en/babel-plugin-transform-react-jsx
But I don't understand why this works in dev mode

[DiFuks]

I removed .babelrc from .storybook and changed main.js. It worked:

const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');

module.exports = {
  stories: ['../src/components/**/*.stories.tsx'],
  addons: ['@storybook/addon-docs'],
  babel: async (options) => ({
    ...options,
    plugins: [
      ...options.plugins,
      '@babel/plugin-transform-react-jsx'
    ]
  }),
  webpackFinal: (config) => {
    config.resolve.plugins.push(new TsconfigPathsPlugin());

    return config;
  }
};

@shilman @nandosangenetto Can you try please?

_Edit_ But routing still doesn't work without the --no-dll flag

[shilman]

@DiFuks great point. perhaps there's a bug where dev mode picks up the project babelrc and production does not? if so, that's pretty bad! can you confirm?

PS proper --no-dll fix coming in the next couple weeks; bandaid available on the latest alpha.

[DiFuks]

@shilman I replaced the content of .babelrc in root path with {} and removed babel config from .storybook/main.js
And... Production build worked! It's very funny 😅

I posted a project that has the discussed issue: https://github.com/DiFuks/react-next-nest-boilerplate

master branch include this fix: https://github.com/storybookjs/storybook/issues/12952#issuecomment-719871776
storybook branch include empty .babelrc file in project root and empty babel config in .storybook/main.js
storybook-bug branch include original code with error

[Carduelis]

@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?

[DiFuks]

@Carduelis This solution didn't help? https://github.com/storybookjs/storybook/issues/12952#issuecomment-719871776

[shilman]

@Carduelis Please upgrade to the latest beta

[sibelius]

fixed for us on v6.1.0-rc.0

[DiFuks]

@sibelius Unfortunately, the problem has not been resolved.

[eric-burel]

Can reproduce on Vulcan Next, only during build https://github.com/VulcanJS/vulcan-next/issues/78

Dev is not affected at all, only static build.

I've deactivated React 17 automatic runtime in favour to classic also to make Next work ok (downstream plugins can have issues with it).

Edit: copying babel.config.js trick did solve it. It's more elegant with a JS file since you can do:

require("../babel.config"); // in storybook babel.config.js

My root babel config for the record:

module.exports = {
  // we also need next/babel preset to work with Next
  presets: [
    [
      "next/babel",
      {
        "styled-jsx": {
          plugins: ["styled-jsx-plugin-postcss"],
        },
        "preset-react": {
          runtime: "classic", // this is the important part, I've temporarily disabled the new automatic runtime which is better but badly supported by 3rd party plugins at the time of writing
        },
      },
    ],
  ]
};

[Spy-Seth]

After upgrading to v6.0.1 my storybook production build got broken with the same error.

I use the proposed fix of @DiFuks and it fix my build

[shilman]

Try upgrading to 6.1?

npx sb upgrade

[ifree92]

"@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.

[mariuslundgard]

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
  },
  ...

[shilman]

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

Here's what I think is going on:

• In our initialization code we try to import the JSX transform and use classic if that fails
• In our webpack config we use alias to force a single version of react using require.resolve (this changed recently https://github.com/storybookjs/storybook/pull/13195)

I think the logic of those two is somehow inconsistent. With a simple repro it should hopefully be easy to fix.

[Fi1osof]

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

[shilman]

@Fi1osof thanks for this. When I do npx sb upgrade to get all the storybook packages to their latest version, it appears to work properly even without the .storybook/.babelrc. Can you verify on your machine?

[ifree92]

@shilman I have tried to upgrade via npx sb upgrade (and removed .storybook/.babelrc file), so I have faced with the same _jsx reference error.

The better solution is just to copy .babelrc into .storybook folder and that might work for now..

[Fi1osof]

@shilman i try npx sb upgrade, but still have error. But i have not this error here: https://github.com/prisma-cms/nextjs
It's similar projects with minimal diffs. I think something with tsconfig.ts maybe. In https://github.com/prisma-cms/component-boilerplate/ modified.

UPD: in last one i remove "baseUrl": "." from tsconfig.json and all links in project relative, not abs.

[Spy-Seth]

@shilman I still have the error with v6.1.6

[rhatfield-bushel]

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'),
        },
      },
    }
  },
}

[shilman]

@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?

[Fi1osof]

@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?

[email protected]
But i using yarn. Try npx build-storybook too.

[Fi1osof]

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.

module.exports = {
  // ...
  // ! 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'],
  }),
// ...
}

@rhatfield-bushel this helps me. And @babel/plugin-transform-react-jsx already exists in SB.

$ yarn why @babel/plugin-transform-react-jsx
yarn why v1.22.5
[1/4] Why do we have the module "@babel/plugin-transform-react-jsx"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "@babel/[email protected]"
info Reasons this module exists
   - "@storybook#addon-docs" depends on it
   - Hoisted from "@storybook#addon-docs#@babel#plugin-transform-react-jsx"
   - Hoisted from "@storybook#react#@babel#preset-react#@babel#plugin-transform-react-jsx"
info Disk size without dependencies: "60KB"

I do not know why this not works nativly.

[radihuq]

I'm in the process of refactoring our component library and I had this piece of commented out code from the old component:

// ...
// OLD COMPONENT
// /** @jsx jsx */
// import { jsx } from '@emotion/core';

// import React from 'react';
// // import { useTheme } from 'emotion-theming';
// ...

We used to need that first line but since we no longer use EmotionJS, removing that line resolved the error for me.

Silly mistake

[pwfisher]

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

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

[Yago]

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"
}