React: `_jsx is not defined` error #12952

shilman · 2020-10-29T23:50:56Z

Originally posted by @NandoSangenetto in #12881 (comment)

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

The text was updated successfully, but these errors were encountered:

shilman · 2020-10-30T03:12:48Z

@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 · 2020-10-30T04:09:46Z

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 · 2020-10-30T05:07:52Z

@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 · 2020-10-30T05:09:04Z

Try building with --no-dll

NandoSangenetto · 2020-10-30T05:18:33Z

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 · 2020-10-31T02:05:43Z

@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 · 2020-10-31T02:36:15Z

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 · 2020-10-31T03:15:34Z

@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 · 2020-10-31T05:00:33Z

@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: #12952 (comment)
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 · 2020-11-12T09:09:49Z

@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 · 2020-11-12T09:26:56Z

@Carduelis This solution didn't help? #12952 (comment)

shilman · 2020-11-12T09:33:43Z

@Carduelis Please upgrade to the latest beta

sibelius · 2020-11-12T13:49:07Z

fixed for us on v6.1.0-rc.0

DiFuks · 2020-11-12T14:16:22Z

@sibelius Unfortunately, the problem has not been resolved.

eric-burel · 2020-11-20T09:12:16Z

Can reproduce on Vulcan Next, only during build VulcanJS/vulcan-next#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
        },
      },
    ],
  ]
};

armandabric · 2020-11-24T14:09:02Z

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 · 2020-11-24T16:06:27Z

Try upgrading to 6.1?

npx sb upgrade

ifree92 · 2020-11-24T16:24:38Z

"@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 · 2020-11-24T17:05:31Z

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

React: `_jsx is not defined` error #12952 storybookjs/storybook#12952 (comment)

shilman · 2020-11-25T02:16:01Z

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 Core: Resolve react and react-dom from core #13195)

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

Fi1osof · 2020-11-25T06:14:18Z

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 · 2020-11-25T08:11:57Z

@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 · 2020-11-25T10:10:51Z

@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 · 2020-11-25T12:06:08Z

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

armandabric · 2020-11-25T14:51:05Z

@shilman I still have the error with v6.1.6

rhatfield-bushel · 2020-11-25T23:20:04Z

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 · 2020-11-26T03:51:04Z

@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 · 2020-11-26T04:10:09Z

@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 · 2020-11-26T04:13:18Z

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 · 2020-12-02T16:21:25Z

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 · 2020-12-05T07:24:41Z

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

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

Yago · 2020-12-08T14:22:32Z

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

Add local .babelrc for React Storybook storybookjs/storybook#12952 (comment)

ndelangen · 2023-02-06T17:11:17Z

This is fixed in storybook 7.0 beta by not providing a default babel config.

shilman added react P0 bug labels Oct 29, 2020

shilman mentioned this issue Oct 29, 2020

Storybook broken when no React import with new JSX transform from react > 16.14.0 #12881

Closed

shilman added configuration babel / webpack question / support and removed bug labels Oct 29, 2020

shilman added the has workaround label Oct 30, 2020

shilman mentioned this issue Nov 9, 2020

Not able to change a story in a static build #13032

Closed

shilman added bug and removed question / support labels Nov 9, 2020

lowsky added a commit to lowsky/gh-dashboard-relay that referenced this issue Nov 24, 2020

fix sb issue

6df30ac

React: `_jsx is not defined` error #12952 storybookjs/storybook#12952 (comment)

lowsky added a commit to lowsky/gh-dashboard-relay that referenced this issue Nov 24, 2020

fix sb issue

2bbd13c

React: `_jsx is not defined` error #12952 storybookjs/storybook#12952 (comment)

shilman self-assigned this Nov 25, 2020

shilman added the needs reproduction label Nov 25, 2020

shilman added this to the 6.1.x milestone Dec 5, 2020

kokiebisu mentioned this issue Dec 11, 2020

Compatibility with npm 7 chromaui/chromatic-cli#217

Closed

tyom added a commit to tyom/storybook-addons that referenced this issue Jan 15, 2021

Update dependencies

9f6a851

Add local .babelrc for React Storybook storybookjs/storybook#12952 (comment)

shilman removed their assignment Jun 8, 2021

shilman removed this from the 6.1.x milestone Jun 8, 2021

aulneau mentioned this issue Jun 21, 2021

feat: add storybook hirosystems/ui#115

Merged

4 tasks

bartaz mentioned this issue Jul 16, 2021

Update jsx transform canonical/react-components#535

Closed

shilman removed the P0 label Oct 18, 2022

ndelangen closed this as completed Feb 6, 2023

its-nasir mentioned this issue Aug 1, 2024

Admission Dashboard issue :- Blanked partner dashboard. navgurukul/ghar#349

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React: `_jsx is not defined` error #12952

React: `_jsx is not defined` error #12952

shilman commented Oct 29, 2020 •

edited

Loading

shilman commented Oct 30, 2020

NandoSangenetto commented Oct 30, 2020

NandoSangenetto commented Oct 30, 2020 •

edited

Loading

shilman commented Oct 30, 2020

NandoSangenetto commented Oct 30, 2020 •

edited

Loading

DiFuks commented Oct 31, 2020 •

edited

Loading

DiFuks commented Oct 31, 2020 •

edited

Loading

shilman commented Oct 31, 2020 •

edited

Loading

DiFuks commented Oct 31, 2020 •

edited

Loading

Carduelis commented Nov 12, 2020 •

edited

Loading

DiFuks commented Nov 12, 2020

shilman commented Nov 12, 2020

sibelius commented Nov 12, 2020

DiFuks commented Nov 12, 2020

eric-burel commented Nov 20, 2020 •

edited

Loading

armandabric commented Nov 24, 2020

shilman commented Nov 24, 2020

ifree92 commented Nov 24, 2020

mariuslundgard commented Nov 24, 2020

shilman commented Nov 25, 2020

Fi1osof commented Nov 25, 2020

shilman commented Nov 25, 2020

ifree92 commented Nov 25, 2020

Fi1osof commented Nov 25, 2020 •

edited

Loading

armandabric commented Nov 25, 2020

rhatfield-bushel commented Nov 25, 2020

shilman commented Nov 26, 2020

Fi1osof commented Nov 26, 2020

Fi1osof commented Nov 26, 2020

radihuq commented Dec 2, 2020

pwfisher commented Dec 5, 2020

Yago commented Dec 8, 2020

ndelangen commented Feb 6, 2023

React: _jsx is not defined error #12952

React: _jsx is not defined error #12952

Comments

shilman commented Oct 29, 2020 • edited Loading

shilman commented Oct 30, 2020

NandoSangenetto commented Oct 30, 2020

NandoSangenetto commented Oct 30, 2020 • edited Loading

shilman commented Oct 30, 2020

NandoSangenetto commented Oct 30, 2020 • edited Loading

DiFuks commented Oct 31, 2020 • edited Loading

DiFuks commented Oct 31, 2020 • edited Loading

shilman commented Oct 31, 2020 • edited Loading

DiFuks commented Oct 31, 2020 • edited Loading

Carduelis commented Nov 12, 2020 • edited Loading

DiFuks commented Nov 12, 2020

shilman commented Nov 12, 2020

sibelius commented Nov 12, 2020

DiFuks commented Nov 12, 2020

eric-burel commented Nov 20, 2020 • edited Loading

armandabric commented Nov 24, 2020

shilman commented Nov 24, 2020

ifree92 commented Nov 24, 2020

mariuslundgard commented Nov 24, 2020

shilman commented Nov 25, 2020

Fi1osof commented Nov 25, 2020

shilman commented Nov 25, 2020

ifree92 commented Nov 25, 2020

Fi1osof commented Nov 25, 2020 • edited Loading

armandabric commented Nov 25, 2020

rhatfield-bushel commented Nov 25, 2020

shilman commented Nov 26, 2020

Fi1osof commented Nov 26, 2020

Fi1osof commented Nov 26, 2020

radihuq commented Dec 2, 2020

pwfisher commented Dec 5, 2020

Yago commented Dec 8, 2020

ndelangen commented Feb 6, 2023

React: `_jsx is not defined` error #12952

React: `_jsx is not defined` error #12952

shilman commented Oct 29, 2020 •

edited

Loading

NandoSangenetto commented Oct 30, 2020 •

edited

Loading

NandoSangenetto commented Oct 30, 2020 •

edited

Loading

DiFuks commented Oct 31, 2020 •

edited

Loading

DiFuks commented Oct 31, 2020 •

edited

Loading

shilman commented Oct 31, 2020 •

edited

Loading

DiFuks commented Oct 31, 2020 •

edited

Loading

Carduelis commented Nov 12, 2020 •

edited

Loading

eric-burel commented Nov 20, 2020 •

edited

Loading

Fi1osof commented Nov 25, 2020 •

edited

Loading