[Bug]: difficulties upgrading @storybook/html to 7.0 using npx sb upgrade and main.cjs/.js in rush monorepo web components project
#22219
Comments
shilman
added
compatibility with other tools
html
pnpm
and removed
pnpm
needs triage
labels
|
Reproductions galore: https://stackblitz.com/@usrrname/collections/fast-design-storybook-spikes cc @shilman @yannbf Initial impressions after discussing with FAST maintainer @radium-v is that we both experience Vite to work well with minimal modifications and agonization, however I may have to rig up a webpack5 config for my work project as it's very entwined within the enterprise codebase. Also, shout out to @rajsite and @yinon for their input on how they're using SB! |
|
Just went through the upgrade process for this using
As a result we can't upgrade to the latest version of Storybook. We're also using a monorepo, however it's a Vite app. |
|
@divmgl What command did you use to upgrade? you may find that you have to clear the sb cache for |
|
Just wanted to give a quick update that the reason this was happening was due to a bad Storybook configuration that I was using to patch up Vite 3 on Storybook 6. const path = require("path")
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],
framework: "@storybook/react",
core: {
builder: "@storybook/builder-vite",
},
features: {
storyStoreV7: true,
},
async viteFinal(config) {
return {
...config,
resolve: {
alias: {
"@permitflow/app": path.resolve(__dirname, "../src"),
fixtures: path.resolve(__dirname, "../fixtures"),
},
},
}
},
}Note the |
|
We've moved to a yarn2 workspace. gonna RESPIKE. LOL |
|
Closing this issue as the integration issue no longer exists --the team migrated to a yarn 2/3 workspace |
Describe the bug
This bug report shows 2 approaches I took in attempting to upgrade
@storybook/htmlandstorybook-addonsto 7.0 within an enterprise rush monorepo.Repro 1, 2 , 3 demonstrate cli issues with
npx sb ugrade,npx sb automigrateandpnpm dlx storybook upgrade, and end with the discovery of compatibility errors between web component project setup and Storybook config files support of ESM.I'm not expecting this to go anywhere since my stack isn't common, just logging it as I'm confused about what to do to move ahead with migration due to:
npmoryarnin a rush monorepo, (partially solved bypnpm dlx...)main.cjsto use amain.tsbecause this project needs to bundle ESM and CommonJS packages, thus facingrequired is not definedRelated: Webpack5 + type: module = require is not defined #14877 [Bug]: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted. #21316Any advice is appreciated 🙏🏼
Reproductions
@storybook/html5-webpackfast-storybook-webpack5@storybook/[email protected]🔥 Worked out! Remaining issues: slot rendering for composite components.TODO:
@storybook/web-components-vitespike with FAST component / template rendering@storybook/web-components-webpack5spike with FAST components / template renderingReproduction 1: using
npx sb upgradecdinto a projectnpx sb upgradeThen, a workspace linking dependency (linking current project to a neighboring svg library project as dependency) kills the upgrade process 🤨
package.json, most SB packages appear upgraded...I manually upgrade "@storybook/builder-webpack5": "6.5.9" to "7.0.6" using
rushx add -p @storybook/builder-webpack5@latest --devrushx start-storybook(this command aliases the build command and the storybook start command.node common/scripts/install-run-rushx.js start-storybook)I get the following error that seems to indicate the temporary files are still referencing the previous version of
@storybook/htmlError 🔴
I run
rush purgeto delete all dependencies and cache builds,rush updateto install the whole monorepo's dependencies, followed byrush buildto incrementally rebuild all projects successfullyDetour: I try to start sb locally with
rushx start-storybookand come across this error 👇🏼Error 🔴
Realizing the build script for
start-storybookhas changed, I manually replace allpackage.jsonscript commands withstorybook devandstorybook buildrequired is not definedWebpack5 + type: module = require is not defined #14877 or [Bug]: Module not found: Error: Can't resolve 'uuid-browser/v4' #21916 due to using amain.cjsandpackage.jsonhavingtype:moduleReproduction 2: systematic manual attempts at upgrading
rushx start-storybookto start storybook locally and am met with [Bug]: Module not found: Error: Can't resolve 'uuid-browser/v4' #21916 (even if I change config files tomain.ts). Update: Maintainer has fixed. Patch release is in the works but I continue to see therequire is not definederror.npx sb automigrateto see if this would resolve any errors. While dependency installs and removal ofbuilder/manager-webpack5were successful, this didn't allow building Storybook locally.Reproduction 3: using
pnpm dlx storybook upgradeSimilar break on
workspace: workspace-reference-to-neighboring-project-dependencyError 🔴
Code Reproduction
Stackblitz of trying to install
storybook/html-webpack5on a node/FAST project where similar errors appear 👇🏼 :https://stackblitz.com/edit/fast-storybook-webpack
System
Before upgrade
After upgrade
Additional context
I'm working in a multi-project monorepo with FAST design web components that uses rush as a package manager/monorepo management tool.
Related OSS issues
microsoft/fast#6698
#18351
About Rush
rush uses pnpm under the hood to update a global and project based dependencies. Their docs explicitly warn devs not to use
npm installas this creates phantom dependencies.Usually, when I need to upgrade a dependency within one of the projects, I use
rush add --package <package-name>@x.y.z --devIt's not a widely used tool amongst front end ecosystem afaik, but I inherited this legacy setup and can't change it til I have time to migrate codebases 😓 But first, I have to upgrade Storybook to 7.0.
FAST.design's Storybook Setup
FAST Design has been using CSF2 in stories.
They use a series of helper functions and extended SB's type definitions to render and bind custom element templates within stories.
Example: button.stories.ts
Storybook Setup and ESM
Our project's Storybook setup currently closely follows FAST's setup, esp using @radium-v's helper functions for template rendering and binding to stories in CSF 2.
Re: CSF3 upgrade: I have been looking at how Nimble project sets up their storybook and writes custom functions to render FAST component templates in stories thanks to @rajsite
The text was updated successfully, but these errors were encountered: