Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upgrade storybook to 5 fails #5882

Closed
cellog opened this issue Mar 5, 2019 · 26 comments
Closed

upgrade storybook to 5 fails #5882

cellog opened this issue Mar 5, 2019 · 26 comments

Comments

@cellog
Copy link

cellog commented Mar 5, 2019

Describe the bug
upgrade to storybook 5 fails with mysterious error

To Reproduce
Steps to reproduce the behavior:

  1. check out Update storybook in group default to the latest version unlock-protocol/unlock#1877
  2. run npm ci in the root directory
  3. cd unlock-app
  4. npm run storybook

Expected behavior
works

Screenshots

screen shot 2019-03-05 at 1 59 02 pm

@tmeasday
Copy link
Member

tmeasday commented Mar 5, 2019

That's an odd one @cellog

@tmeasday
Copy link
Member

tmeasday commented Mar 6, 2019

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
Copy link
Author

cellog commented Mar 6, 2019

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
Copy link
Member

tmeasday commented Mar 6, 2019

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
Copy link
Contributor

could the issue be related to this one?
#4995

@shilman
Copy link
Member

shilman commented Mar 12, 2019

@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
Copy link

stale bot commented Apr 2, 2019

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!

@stale stale bot added the inactive label Apr 2, 2019
@cellog
Copy link
Author

cellog commented Apr 2, 2019

This is still an issue with the latest everything.

@stale stale bot removed the inactive label Apr 2, 2019
@cellog
Copy link
Author

cellog commented Apr 15, 2019

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
Copy link

thecotne commented Apr 22, 2019

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
Copy link

stale bot commented May 13, 2019

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!

@stale stale bot added the inactive label May 13, 2019
@karldanninger
Copy link

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 stale bot removed the inactive label May 13, 2019
@stale
Copy link

stale bot commented Jun 3, 2019

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
Copy link

worc commented Sep 4, 2019

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
Copy link

Paskvil commented Feb 8, 2020

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
Copy link

nverba commented Feb 18, 2020

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
Copy link
Contributor

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
Copy link
Member

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

@albert-schilling
Copy link
Contributor

@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
Copy link
Contributor

osdiab commented Apr 27, 2020

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
Copy link
Contributor

osdiab commented Apr 27, 2020

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

@piotrkrajewskicn
Copy link

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
Copy link
Member

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

@daniel-vc
Copy link

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
Copy link

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!

@jtowe1
Copy link

jtowe1 commented Sep 2, 2021

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

@osdiab Did you ever fix this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests