Storybook: upgrade storybook to 5 fails

[cellog]

Describe the bug
upgrade to storybook 5 fails with mysterious error

To Reproduce
Steps to reproduce the behavior:

1. check out https://github.com/unlock-protocol/unlock/pull/1877
2. run npm ci in the root directory
3. cd unlock-app
4. npm run storybook

Expected behavior
works

Screenshots

[tmeasday]

That's an odd one @cellog

[tmeasday]

I took a look at this and it is completely bizarre.

It has someting to do with styled-components (if you e.g. comment out all the styled components in KeyList.js it no longer errors). I would say it's a problem with the styled components babel plugin but even if I disable it is still happens.

Any ideas @cellog?

[cellog]

Thanks for taking a look. Our entire project is based on styled-components, so extricating it will be a no-go. If the issue is in styled components, it may be in their babel plugin? I think the big question is what is different between storybook 4.1 and 5.0 that is triggering the weird bug?

I won't have free cycles to investigate this immediately, but perhaps next week. If you think of anything for me to try, I will definitely drop things to do that.

[tmeasday]

Well don't worry plenty of projects use styled-components with SB5 so there is no need to stop using it. As I mentioned I tried disabling the babel plugin with no success. Maybe I didn't manage it to actually disable it? -- it does seem the most likely culprit (although I know that other projects use it successfully also).

what is different between storybook 4.1 and 5.0

Well probably a lot of things but nothing comes to mind that is directly relevant.

[mohsinulhaq]

could the issue be related to this one?
https://github.com/storybooks/storybook/issues/4995

[shilman]

@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

[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!

[cellog]

This is still an issue with the latest everything.

[cellog]

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.

[thecotne]

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

[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!

[karldanninger]

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.

[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!

[worc]

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

[Paskvil]

I'm not using storybook, but I have encountered the same problem importing SVG and PNG in a plain React app.
For me, disabling the @babel/plugin-transform-react-constant-elements plugin in babel config did the trick.

[nverba]

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.

[albert-schilling]

I have a similar issue and what is causing it, is a React component that takes other components as props and renders these. If I comment this out, I don't get any error messages. I tried the webpack.config.js from @thecotne , but unfortunately, it didn't do the trick.
Anyone have any new thoughts on this issue?

Here is part of my error message:

> import ComponentName, { var _ref3 =
| /*#__PURE__*/
| React.createElement(CheckboxText, { ...

[ndelangen]

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

[albert-schilling]

@ndelangen Hi Norbert, thanks for the hint. Indeed, it now works after switching the import to require method for these troubling components. But why is that necessary? Usually, I use import for all other components and it never caused a problem in the other storybook stories ...

[osdiab]

Hmm in my case I'm using create-react-app so I didn't write a babelrc myself (it's whatever CRA is using). Not sure how I can apply the fix for this case.

In my case I also use emotion for styling. I tried a couple things:

1. @nverba's workaround
2. Adding an empty .babelrc that contains nothing

Both, instead of the var error shown above, give me the following error from Emotion:

You are trying to create a styled element with an undefined component.
You may have forgotten to import it.

So yeah I'm pretty confused right now, not sure what to do. Any suggestions?

[osdiab]

OK, i think the above fixes both did work, but it was an unrelated emotion error. Will file a bug report there!

[piotrkrajewskicn]

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!

[ndelangen]

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

[daniel-vc]

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

Thanks @ndelangen. What version will that be? And does that mean we can remove the code that @piotrkrajewskicn has specified once the release is out?

[amacleay-cohere]

I found myself in a situation where our storybook webpack config was a little more complex and @piotrkrajewskicn 's excellent workaround wasn't quite enough (the rule was hidden in a oneOf) - the following is what I settled on:

  webpackFinal: async (config) => {
    const faultyPluginName = "plugin-transform-react-constant-elements";

    // So, it turns out webpack rule configuration is complicated....
    config.module.rules
      .map((r) => r.use)
      .flat()
      .concat(
        config.module.rules
          .filter((r) => r.oneOf)
          .map((r) => r.oneOf)
          .flat()
      )
      .filter(Boolean)
      .filter((r) => /babel-loader/.test(r.loader) && r.options && r.options.plugins)
      .forEach(
        (r) =>
          // Side-effect alert!
          (r.options.plugins = r.options.plugins.filter(
            (plugin) => typeof plugin !== "string" || !plugin.includes(faultyPluginName)
          ))
      );
    return config;
  },

Hope someone finds this helpful!