diff --git a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts index 2acdd32b11e4..20095ec6164b 100644 --- a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts +++ b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts @@ -45,7 +45,7 @@ export default { name: 'ResolvedReact', }, // the version string changes with every release of React/Next.js/Preact, not worth snapshotting - chromat: { disable: true }, + chromatic: { disable: true }, }, }; diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 1d1aeaf8ee03..5f2ff4634c02 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -203,8 +203,19 @@ const baseTemplates = { }, 'react-vite/prerelease-ts': { name: 'React Prerelease (Vite | TypeScript)', - script: - 'npm create vite --yes {{beforeDir}} -- --template react-ts && cd {{beforeDir}} && yarn add react@beta react-dom@beta', + /** + * 1. Create a Vite project with the React template + * 2. Add React beta versions + * 3. Add resolutions for @types/react and @types/react-dom, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#installing + * 4. Add @types/react and @types/react-dom pointing to the beta packages + */ + script: ` + npm create vite --yes {{beforeDir}} -- --template react-ts && \ + cd {{beforeDir}} && \ + yarn add react@beta react-dom@beta && \ + jq '.resolutions += {"@types/react": "npm:types-react@beta", "@types/react-dom": "npm:types-react-dom@beta"}' package.json > tmp.json && mv tmp.json package.json && \ + yarn add --dev @types/react@npm:types-react@beta @types/react-dom@npm:types-react-dom@beta + `, expected: { framework: '@storybook/react-vite', renderer: '@storybook/react', diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index bc71a1433441..8f11b3a7a4db 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -163,7 +163,7 @@ const runGenerators = async ( else if (expected.renderer === '@storybook/server') flags = ['--type server']; const time = process.hrtime(); - console.log(`🧬 Generating ${name} (${{ dirName }})`); + console.log(`🧬 Generating ${name} (${dirName})`); await emptyDir(baseDir); // We do the creation inside a temp dir to avoid yarn container problems diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts index a2fb82e1fa6a..03b05ff3bf40 100644 --- a/scripts/utils/yarn.ts +++ b/scripts/utils/yarn.ts @@ -22,6 +22,7 @@ export const addPackageResolutions = async ({ cwd, dryRun }: YarnOptions) => { const packageJsonPath = path.join(cwd, 'package.json'); const packageJson = await readJSON(packageJsonPath); packageJson.resolutions = { + ...packageJson.resolutions, ...storybookVersions, 'enhanced-resolve': '~5.10.0', // TODO, remove this // this is for our CI test, ensure we use the same version as docker image, it should match version specified in `./code/package.json` and `.circleci/config.yml` @@ -97,7 +98,7 @@ export const configureYarn2ForVerdaccio = async ({ `yarn config set enableImmutableInstalls false`, ]; - if (key.includes('svelte-kit')) { + if (key.includes('svelte-kit') || key.includes('prerelease')) { // Don't error with INCOMPATIBLE_PEER_DEPENDENCY for SvelteKit sandboxes, it is expected to happen with @sveltejs/vite-plugin-svelte command.push( `yarn config set logFilters --json '[ { "code": "YN0013", "level": "discard" } ]'`