Storybook: Something in Storybook's default Babel config causes ReferenceError (tdz) errors

[vdh]

With some Typescript code like this example:

const Column: FC<ColumnProps> = ({
    cards = [],
  /* … */
}) => {
  /* … */
  return (
    {/* … */}
      <CardList
        cards={cards}
      />
    {/* … */}
  );
};

Will get compiled normally by Babel into:

const Column = (_ref) => {
  let {
    cards = [],
    /* … */
  } = _ref;
  /* … */
  react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_CardList__WEBPACK_IMPORTED_MODULE_24__["default"], {
    cards: cards,
    /* … */
  })
};

But under the default Storybook babel setup, gets compiled into:

const Column = (_ref) => {
  var _ref3 =
  /*#__PURE__*/
  react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_CardList__WEBPACK_IMPORTED_MODULE_24__["default"], {
    cards: cards,
    /* … */
  });

  let {
    cards = [],
    /* … */
  } = _ref;
  /* … */
};

And creates a ReferenceError error because the React.createElement call is moved higher than the let, so it's trying to use cards too early.

But I can't figure out how to debug this to find out which Babel plugin or config is doing this broken var / let interaction.

[shilman]

Can you create a minimal repro?

[vdh]

@shilman Sorry, I haven't had time to put one together yet. Until I have time to create a full repro, I suspect this is due to @babel/plugin-transform-react-constant-elements, because the error is happening when JSX is being hoisted above let statements.

[vdh]

After patching Storybook's Webpack config for babel-loader to exclude @babel/plugin-transform-react-constant-elements, the code runs normally again. I had to jump through some hoops of assumptions about the config to patch it out though, so my patch isn't robust.

I couldn't find an exact issue in the Babel repo that relates directly to what I encountered, but the plugin seems to have a history of being buggy, e.g.: https://github.com/facebook/create-react-app/issues/553

The closest I could find was https://github.com/babel/babel/issues/4419 which seems to have a PR, but that PR hasn't been shipped as far as I can tell (and isn't referenced from any release notes I checked).

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[vdh]

@shilman So what exactly is the reason why Storybook includes @babel/plugin-transform-react-constant-elements by default anyway? Why is an optimisation plugin bundled by default? It changes the way the user's code is executed, and has plenty of demonstrable flaws.

[shilman]

@vdh i'm not sure, but maybe @ndelangen knows

[ndelangen]

Let's remove the plugin!

Would anyone be able to open a PR removing it?

[Pyrolistical]

the plugin was removed in https://github.com/storybookjs/storybook/pull/11086