Skip to content
This repository has been archived by the owner on Jun 1, 2023. It is now read-only.

Storybook route #35

Merged
merged 34 commits into from
Nov 6, 2020
Merged

Storybook route #35

merged 34 commits into from
Nov 6, 2020

Conversation

BeeMargarida
Copy link
Contributor

@BeeMargarida BeeMargarida commented Nov 4, 2020

- -
Issue Storybook not showing in vercel deploument.
image
Related to the iframe.html loading.
Also problem with the documentation, missing regeneratorRuntime.
Links Links with issues of similar or the same problem:
-storybook-eol/storybook-deployer#56
-vercel/serve#631
-storybookjs/storybook#12814
-storybookjs/storybook#11694
Decisions - Nothing in the posts above contain the fix that finally worked out, but there seems to be a problem between webpack 5 and storybook (here and here), with storybook still not supporting webpack@5. Since webpack is a dependency of this repo, it causes a certain number of problems in the deployment and usage. The solution was forcing the webpack version to below 5.
- Added @babel/plugin-transform-runtime to fix regeneratorRuntime error in styleguidist documentation.
Note The storybook only works if the route is explicitly set in the browser /storybook. If the link to the storybook is clicked in the styleguide, the storybook it is redirected to is the one in master, which is broken.

@vercel
Copy link

vercel bot commented Nov 4, 2020

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/platforme/ripe-sdk-components-vue/id0sozyr0
✅ Preview: https://ripe-sdk-components-vue-git-ms-fix-vercel-storybook.platforme.vercel.app

@gcandal gcandal added the back-port 🔮 Requires back-porting of functionality to other projects label Nov 4, 2020
@gcandal
Copy link
Contributor

gcandal commented Nov 4, 2020

Will need porting to https://github.com/ripe-tech/ripe-sdk-components-react as well

.storybook/manager-head.html Outdated Show resolved Hide resolved
webpack.config.js Outdated Show resolved Hide resolved
Comment on lines 71 to 91
}
},
useBuiltIns: "entry",
corejs: "3"
}
]
: "@babel/preset-env"
: [
"@babel/preset-env",
{
useBuiltIns: "entry",
corejs: "3"
}
]
],
plugins: [
[
"@babel/plugin-transform-runtime",
{
regenerator: true
}
]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On which of our products is this based on?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

uxf_webpack, which is being used by ripe-components-vue.
I included here because it was necessary to solve the regeneratorRuntime error that was being thrown by the styleguide

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be part of the host application then. In this case, that would be storybook

@gcandal gcandal assigned BeeMargarida and unassigned gcandal Nov 5, 2020
Comment on lines 71 to 91
}
},
useBuiltIns: "entry",
corejs: "3"
}
]
: "@babel/preset-env"
: [
"@babel/preset-env",
{
useBuiltIns: "entry",
corejs: "3"
}
]
],
plugins: [
[
"@babel/plugin-transform-runtime",
{
regenerator: true
}
]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be part of the host application then. In this case, that would be storybook

@gcandal gcandal assigned BeeMargarida and unassigned gcandal Nov 5, 2020
@BeeMargarida
Copy link
Contributor Author

@gcandal The problem is that this is required by the styleguide, not storybook. The styleguide is using the webpack config file. However, I can change it so that this is moved to the webpack cconfiguration in the styleguide.config.js file.

@gcandal
Copy link
Contributor

gcandal commented Nov 5, 2020

@gcandal The problem is that this is required by the styleguide, not storybook. The styleguide is using the webpack config file. However, I can change it so that this is moved to the webpack cconfiguration in the styleguide.config.js file.

Oh you're right. Yep, go for it :). The whole point is to let the host application include the regenerator runtime. If all libraries included it, you could end up with 100s of duplicates.

@gcandal gcandal assigned joamag and unassigned gcandal Nov 5, 2020
@gcandal gcandal removed the back-port 🔮 Requires back-porting of functionality to other projects label Nov 5, 2020
@joamag joamag merged commit 8f0a948 into master Nov 6, 2020
@joamag joamag deleted the ms/fix-vercel-storybook branch November 6, 2020 16:01
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants