Storybook 6.2.0-beta.13 not transforming class properties #14197
Comments
|
@anicholls as a workaround can you try babelDefault: async options => ({
...options,
plugins: [...options.plugins, '@babel/plugin-proposal-class-properties'],
}),we did a bunch of package upgrades in 6.2 so if you're not seeing any specific change about this, i'd bet it's due to something that happened in one of our dependencies? |
|
@shilman Thanks! Switching from |
|
Hi guys, But I was managed to get rid of that error and run storybook by simply installing the following packages: and deleting However I am getting another error right now: any thoughts? One more thing, I played with alpha versions and found out that the change was introduced in v6.2.0-alpha.15. There are no any errors with v6.2.0-alpha.14. |
|
still |
|
It's gotta be something here #13631
|
|
Hi guys, What I did is:
No issues so far. |
|
Was unable to reproduce this in a fresh project. Does anybody have a repro repo they can share? |
I think I managed to reproduce this. I removed and simplified as many files as possible from our design system where we currently have this problem when upgrading and then applied the Storybook upgrade guide on it. Here is the repo: Sorry if there's many unnecessary dependencies. I tried to not touch them too much since the problem seem to be related to dependencies |
|
I had the same problem with storybook 6.2.0-rc.9. Solved by |
|
In my case, I was able to make it work by forcing |
|
@PhekPR is there any chance you can update your project to use the Yarn or NPM registry? Currently your lockfile is pointing at |
|
For those of you running into this, is it fixed if you remove |
Ah of course. I missed one of them, thought I removed them all. It should now be fixed! |
|
@PhekPR hey, the lockfile still points to https://nexus.pricerunner.info, any chance you can fix it? If I blow away the lockfile I believe it solves the problem, but I want to repro if possible. |
Ahh. Of course 🤦♂️ |
|
@shilman I don't have a stripped down repro repo, but it is reproducible on our component library: https://github.com/Workday/canvas-kit. All dependencies use the yarn registry. Ideally we'd avoid blowing away our lockfile. |
|
@anicholls I fixed it by specifically removing only the |
|
caught this bug after updating 6.2.0-alpha.24 -> 6.2.5 😕 6.2.0-rc.1 works well though |
|
Debugged a little more
Looks like this pr breaks everything #14047 |
|
Running the following fixed it for me: |
|
@shilman @hipstersmoothie I've reproduced https://github.com/artaommahe/storybook-issue14197
Tried these things, no one helped
But this one helps (can be reproduced with this repo)
Can't find what lib to update to solve this 😕(removing yarn.lock and updating all libs in our monorep is not a way, too much to test/fix/break) |
|
I just encountered the same issue. And I might not have found a solution but a potential cause of the issue. I have very scarce knowledge of how, in our case, yarn works with multiple versions of the same dependency. But running I could use yarn resolutions and force the version. But this is causing ripples into the other projects. As mentioned not a solution but a possible cause. |
|
Thank you @adambrgmn -- much appreciated!! 🙏 |
|
As pointed out by @adambrgmn, the latest babel version introduces some changes that don't work well with old versions. Making sure to have consistent dependencies is a must here. In my case it was references to older NOTE: Once updated, storybook works again, but will spit out some warnings about the Steps taken
I got it to work by taking the nuclear option of deleting Of course, locking corresponding babel references to the right version avoids nuking your |
|
@Domiii Try upgrading to the latest prerelease: I think we've already got a fix in |
|
Closing this as fixed in 6.3 |
|
@shilman Issue still persists in 6.3. 😞 |
|
It was happening to us also for 6.1 version, upgrading it to 6.3 fixed the issue. @imbhargav5 may be try deleting node_modules and storybook cache and try again. |
|
Will try it 👍 |
@shilman I upgraded to 6.3.4, cleared node_modules and cache, and I was still getting this issue: Adding this to main.js fixed it: babel: async (options) => ({
...options,
plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]],
}),Should I open a new issue? |
|
@shilman Encountered this issue in the latest version. Environment Infoyarn why @babel/preset-env@mayank99 The method mentioned has given me some help. This is done by explicitly listing the // It’s working
babel: () => {},
// Does not help
babel: async (options) => ({
...options,
plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]],
}), |
|
jus curious why/how #14197 (comment) resolves when our babel.config.js preset // ...
const defaultPluginsBeforeRegenerator = [
// ...
[
require('@babel/plugin-proposal-class-properties'),
// use `this.foo = bar` instead of `this.defineProperty('foo', ...)`
{loose: true},
],
// ...
...passthroughSyntaxPlugins,
];
// ...
return {
// ...
overrides: [
// the flow strip types plugin must go BEFORE class properties!
// there'll be a test case that fails if you don't.
{
plugins: [require('@babel/plugin-transform-flow-strip-types')],
},
{
plugins: [
...defaultPluginsBeforeRegenerator,
isHermes ? null : require('@babel/plugin-transform-regenerator'),
...defaultPluginsAfterRegenerator,
].filter(Boolean),
},
// ...purely speaking from theory, still on ye ole v5 |
|
For anybody stumbling on this issue, we still don't have a root cause. Given all the comments above, it appears that multiple versions of babel and its various packages are not working well together. Given that, clearing those out of the lockfile and reinstalling forces all the babel libs to the same version, which solves the problem. Things to try (in order of least to most disruptive):
// main.js
module.exports = {
babel: async (options) => ({
...options,
plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]],
}),
} |
|
@shilman Thanks for the snippet! |
|
For the 3rd time I've come across this problem, it happens about every other time I upgrade dev-packages, especially babel-related stuff. As I keep returning here from google, will leave this note for future self. None of the snippets above helped, but what really helps is clearing ALL yarn caches, i.e. local project cache at And yes, all babel-* modules better be exact same version, e.g: "@babel/core": "^7.22.9",
"@babel/preset-env": "^7.22.9",
"@babel/preset-typescript": "^7.22.9",
"@babel/runtime": "^7.22.9",
"@babel/runtime-corejs3": "^7.22.9",
None of babel plugins apart from Amazing we're still facing this in December 2023, module management should be top-notch by now.. |
I have tried to upgrade to
6.2.0-beta.13to test the fix for #13608 and I am having babel issues. On start up I’m getting a bunch ofSyntax Error: Missing class properties transformerrors. However, it looks like@babel/plugin-proposal-class-propertiesis still included in the default storybook babel plugins so I don't know why this is appearing all of a sudden. Even if I explicitly add it myself inmain.jsI get the same error. I saw a couple babel changes in the changelog for 6.2, but nothing specifically related to this. It worked fine in6.1.3.To Reproduce
Steps to reproduce the behavior:
@storybook/[email protected]withnpx sb upgrade -pExpected behavior
The class properties should be transformed and Storybook should start normally.
Code snippets
Adding the following to
main.jsdoes not help.If you log
options, you can see that the plugin is already provided so this shouldn't be needed anyway.┆Issue is synchronized with this Asana task by Unito
The text was updated successfully, but these errors were encountered: