-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
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
Comments
That's an odd one @cellog |
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 Any ideas @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. |
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).
Well probably a lot of things but nothing comes to mind that is directly relevant. |
could the issue be related to this one? |
@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 |
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! |
This is still an issue with the latest everything. |
update: still an issue, but I found a very strange fix! If I create a |
this is my workaround i have this in my 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 |
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. |
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! |
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 |
I'm not using storybook, but I have encountered the same problem importing SVG and PNG in a plain React app. |
I had this exact issue with "Unexpected keyword 'var'", triggered by adding styled-components to a create-react-app typescript project today. Removing the Curiously, I can't uninstall |
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 Here is part of my error message:
|
@albert-schilling looks like the code still has ESM in it, which may not be supported by your browser. |
@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 ... |
Hmm in my case I'm using In my case I also use
Both, instead of the
So yeah I'm pretty confused right now, not sure what to do. Any suggestions? |
OK, i think the above fixes both did work, but it was an unrelated emotion error. Will file a bug report there! |
As @Paskvil mentioned, the problem lies in
Hope that helps anyone! |
This plugin has been removed on |
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? |
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 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! |
@osdiab Did you ever fix this? |
Describe the bug
upgrade to storybook 5 fails with mysterious error
To Reproduce
Steps to reproduce the behavior:
npm ci
in the root directorycd unlock-app
npm run storybook
Expected behavior
works
Screenshots
The text was updated successfully, but these errors were encountered: