storybook: upgrade storybook to 5 fails

update: still an issue, but I found a very strange fix!

If I create a storybook/.babelrc whose contents is identical to the global .babelrc then it suddenly starts working.

This is still an issue with the latest everything.

As @Paskvil mentioned, the problem lies in plugin-transform-react-constant-elements and for me the workaround was to remove it from babel config of Storybook as it is there by default, so I did this in main.js

module.exports = {
  webpackFinal: async (config) => {
    const faultyPluginName = 'plugin-transform-react-constant-elements';
    const javaScriptFilesRule = config.module.rules.find(rule => rule.test.toString().includes('js'));
    const babelLoader = javaScriptFilesRule.use.find(usage => usage.loader === 'babel-loader');
    babelLoader.options.plugins = babelLoader.options
      .plugins
      .filter(plugin => typeof plugin !== 'string' || !plugin.includes(faultyPluginName));

    return config;
  },
};

Hope that helps anyone!

still have to do the duplicate .babelrc config workaround for storybook@^5.1.11 and styled-components@^4.3.2 that use svgs and function components

This plugin has been removed on next branch. Should be released in the latest beta!

@albert-schilling looks like the code still has ESM in it, which may not be supported by your browser.

I had this exact issue with “Unexpected keyword ‘var’”, triggered by adding styled-components to a create-react-app typescript project today.

Removing the @storybook/preset-create-react-app add-on from main.js and installing @storybook/preset-typescript along with ts-loader did the trick.

Curiously, I can’t uninstall @storybook/preset-create-react-app from the package completely, as it throws “Cannot find module 'react-docgen-typescript-loader`”. I tried deleting the node_modules folder and yarn.lock, but no joy so I left it in. Still, glad it’s all working for now.

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!

In case anyone comes across this issue, what I found was I followed what @thecotne said above with the config, and removed all storybook addons until I found some culprits in my particular setup.

this is my workaround

i have this in my storybook/webpack.config.js

const babelrc = require('./.babelrc.js')

module.exports = async ({ config, mode }) => {

  config.module.rules[0].use[0].options = {
    babelrc: false,
    cacheDirectory: true,
    ...babelrc
  }

  return config
}

storybook adds some plugins in babel config which apparently causes this issue

so over writing options in babel-loader fixes issue

@mohsinulhaq I don’t think that issue is related – AFAIK that’s mostly about custom addons but this repo is only using off-the-shelf addons