CLI: Re-Add Nuxt support #28607

valentinpalkovic · 2024-07-15T13:05:52Z

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-28607-sha-b9bf7d39. Try it out in a new sandbox by running npx storybook@0.0.0-pr-28607-sha-b9bf7d39 sandbox or in an existing project with npx storybook@0.0.0-pr-28607-sha-b9bf7d39 upgrade.

More information


Published version	`0.0.0-pr-28607-sha-b9bf7d39`
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	`revert-28479-revert/26884`
Commit	`b9bf7d39`
Datetime	Mon Jul 15 13:08:23 UTC 2024 (`1721048903`)
Workflow run	9939992740

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=28607

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	76.4 MB	76.4 MB	557 B	3.57	0%
initSize	169 MB	169 MB	1.21 kB	3.27	0%
diffSize	92.8 MB	92.8 MB	654 B	0.92	0%
buildSize	7.46 MB	7.46 MB	0 B	0.87	0%
buildSbAddonsSize	1.62 MB	1.62 MB	0 B	0.71	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.3 MB	2.3 MB	0 B	-	0%
buildSbPreviewSize	351 kB	351 kB	0 B	0.5	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.46 MB	4.46 MB	0 B	0.63	0%
buildPreviewSize	3 MB	3 MB	0 B	1.43	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	23.8s	13.6s	-10s -190ms	-0.57	-74.4%
generateTime	21.4s	22.2s	848ms	1.71	3.8%
initTime	18.4s	18.6s	185ms	1.21	1%
buildTime	11.3s	11.5s	209ms	-0.94	1.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	7.3s	7.3s	-58ms	-0.22	-0.8%
devManagerResponsive	4.8s	4.6s	-189ms	-0.55	-4.1%
devManagerHeaderVisible	890ms	766ms	-124ms	-0.54	-16.2%
devManagerIndexVisible	924ms	806ms	-118ms	-0.52	-14.6%
devStoryVisibleUncached	1.3s	1.4s	91ms	0.4	6.4%
devStoryVisible	923ms	807ms	-116ms	-0.52	-14.4%
devAutodocsVisible	676ms	674ms	-2ms	-0.68	-0.3%
devMDXVisible	682ms	689ms	7ms	-0.28	1%
buildManagerHeaderVisible	860ms	674ms	-186ms	-0.87	-27.6%
buildManagerIndexVisible	870ms	680ms	-190ms	-0.89	-27.9%
buildStoryVisible	912ms	749ms	-163ms	-0.67	-21.8%
buildAutodocsVisible	684ms	593ms	-91ms	-1.38	🔰-15.3%
buildMDXVisible	629ms	606ms	-23ms	-1.04	-3.8%

nx-cloud · 2024-07-15T13:10:27Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 846bf4b. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

nx run-many -t build --parallel=3

Sent with 💌 from NxCloud.

valentinpalkovic · 2024-07-15T13:37:14Z

@tobiasdiez
I am encountering the following error after init while testing the revert:

npx nuxi@latest init (npm)
cd ./nuxt-app
npx storybook@0.0.0-pr-28607-sha-b9bf7d39 init

Running Storybook

> storybook
> storybook dev -p 6006 --quiet

storybook v0.0.0-pr-28607-sha-b9bf7d39

WARN The following packages are incompatible with Storybook 0.0.0-pr-28607-sha-b9bf7d39 as they depend on different major versions of Storybook packages:
WARN - @nuxtjs/storybook@8.1.5
WARN  Repo: https://storybook.nuxtjs.org
WARN 
WARN 
WARN Please consider updating your packages or contacting the maintainers for compatibility details.
WARN For more on Storybook 8 compatibility, see the linked GitHub issue:
WARN https://github.com/storybookjs/storybook/issues/26031
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
Error: Cannot find module '@storybook/builder-vite'
Require stack:
- ./node_modules/@storybook/core/dist/core-server/index.cjs
- ./node_modules/storybook/dist/generate.cjs
- ./node_modules/storybook/bin/index.cjs
    at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
    at Module._resolveFilename (./node_modules/esbuild-register/dist/node.js:4799:36)
    at Function.resolve (node:internal/modules/helpers:188:19)
    at getPreviewBuilder (./node_modules/@storybook/core/dist/core-server/index.cjs:102320:19)
    at buildDevStandalone (./node_modules/@storybook/core/dist/core-server/index.cjs:104759:5)
    at async withTelemetry (./node_modules/@storybook/core/dist/core-server/index.cjs:103500:12)
    at async dev (./node_modules/storybook/dist/generate.cjs:735:506)
    at async Command.<anonymous> (./node_modules/storybook/dist/generate.cjs:737:245)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

valentinpalkovic · 2024-07-15T13:43:43Z

@tobiasdiez
I am encountering the browser following error after init while testing the revert:

npx nuxi@latest init (pnpm)
cd ./nuxt-app
npx storybook@0.0.0-pr-28607-sha-b9bf7d39 init
Running Storybook

SyntaxError: The requested module '/node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/kebabCase.js?v=726791be' does not provide an export named 'default'

@ndelangen This might be CPC related, though.

#28607 (comment)

tobiasdiez · 2024-07-15T20:27:03Z

Thanks for this PR and your tests!

Error: Cannot find module '@storybook/builder-vite'
Require stack:

./node_modules/@storybook/core/dist/core-server/index.cjs

./node_modules/storybook/dist/generate.cjs

./node_modules/storybook/bin/index.cjs
at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
at Module._resolveFilename (./node_modules/esbuild-register/dist/node.js:4799:36)
at Function.resolve (node:internal/modules/helpers:188:19)
at getPreviewBuilder (./node_modules/@storybook/core/dist/core-server/index.cjs:102320:19)
at buildDevStandalone (./node_modules/@storybook/core/dist/core-server/index.cjs:104759:5)
at async withTelemetry (./node_modules/@storybook/core/dist/core-server/index.cjs:103500:12)
at async dev (./node_modules/storybook/dist/generate.cjs:735:506)
at async Command. (./node_modules/storybook/dist/generate.cjs:737:245)

I can reproduce it as well. The problem is that in our setup @storybook/builder-vite is only a dependency of the nuxt module, but require is called from the main storybook (or core), and thus only looks for it in the main node_modules folder.

Simplest solution: just add @storybook/builder-vite as a main dependency. But then the user has to sync the builder-vite version with what the nuxt module is using (or we declare it as peer-dep). Would work but maybe not ideal

More involved solution: make it possible that presets return a javascript object as builder, instead of only a module name. (Similar to how eslint v9 is handling plugins now).

Do you have any preference, or another idea?

tobiasdiez · 2024-07-15T20:28:59Z

@tobiasdiez I am encountering the browser following error after init while testing the revert:

npx nuxi@latest init (pnpm) cd ./nuxt-app npx storybook@0.0.0-pr-28607-sha-b9bf7d39 init Running Storybook
SyntaxError: The requested module '/node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/kebabCase.js?v=726791be' does not provide an export named 'default'
@ndelangen This might be CPC related, though.

I've fixed this already in the main branch by adding lodash to optimizeDeps:
https://github.com/nuxt-modules/storybook/blob/64e80dec7c15d9e03fa22f806ac269fbe8146d1f/packages/storybook-addon/src/preset.ts#L171-L175

valentinpalkovic · 2024-07-16T09:00:43Z

Thanks for this PR and your tests!

Error: Cannot find module '@storybook/builder-vite'
Require stack:

./node_modules/@storybook/core/dist/core-server/index.cjs

./node_modules/storybook/dist/generate.cjs

./node_modules/storybook/bin/index.cjs
at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
at Module._resolveFilename (./node_modules/esbuild-register/dist/node.js:4799:36)
at Function.resolve (node:internal/modules/helpers:188:19)
at getPreviewBuilder (./node_modules/@storybook/core/dist/core-server/index.cjs:102320:19)
at buildDevStandalone (./node_modules/@storybook/core/dist/core-server/index.cjs:104759:5)
at async withTelemetry (./node_modules/@storybook/core/dist/core-server/index.cjs:103500:12)
at async dev (./node_modules/storybook/dist/generate.cjs:735:506)
at async Command. (./node_modules/storybook/dist/generate.cjs:737:245)

I can reproduce it as well. The problem is that in our setup @storybook/builder-vite is only a dependency of the nuxt module, but require is called from the main storybook (or core), and thus only looks for it in the main node_modules folder.

Simplest solution: just add @storybook/builder-vite as a main dependency. But then the user has to sync the builder-vite version with what the nuxt module is using (or we declare it as peer-dep). Would work but maybe not ideal

More involved solution: make it possible that presets return a javascript object as builder, instead of only a module name. (Similar to how eslint v9 is handling plugins now).

Do you have any preference, or another idea?

@tobiasdiez Take a look at https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/preset.ts#L31. You can see that you can also just pass an absolute path as a value. With this approach, you make sure that @storybook/builder-vite or any other package which you have installed as a dependency will be resolved from node_modules/@storybook-vue/nuxt instead of node_modules/@storybook/core-preset

tobiasdiez · 2024-07-20T15:18:15Z

Many thanks. This worked like a charm! 🚀

In nuxt-modules/storybook#729, I've now also added e2e tests (using this PR here to add storybook to a nuxt starter). Running build-storybook now works (and is tested), but I still get some errors when actually running the storybook. Is there a reusable test suite or something like this that I can point to a storybook-static folder and that verifies that the stories are okay. In a similar vain, it would be handy to have the storybook templates used for the tests here somehow published so that they can be reused to test downstream packages (I noticed this need not only for the nuxt integration but also while developing the vue addon https://github.com/tobiasdiez/storybook-vue-addon).

kasperpeulen · 2024-07-22T07:29:27Z

@valentinpalkovic @tobiasdiez Maybe it is best if we have Nuxt sandbox over here:

storybook/code/lib/cli/src/sandbox-templates.ts

Line 354 in a1f56b3

},

valentinpalkovic · 2024-07-24T05:50:04Z

@tobiasdiez As Kasper mentioned, we could add Nuxt to our sandboxes, and you could test the sandbox on this PR and rerun it every time you release a new Canary version. Otherwise, I don't see an easy way to copy over our test suite setup to your repository.

KeremTurkyilmaz · 2024-07-29T08:04:13Z

Hello @tobiasdiez do you have any news when this draft will be merged ?

tobiasdiez · 2024-08-03T08:26:19Z

@kasperpeulen @valentinpalkovic Thanks for the suggestion. Adding a sandbox would indeed give some confidence that things are working, but I was hoping for a solution that we can apply in downstream projects (e.g. that PRs to the nuxt storybook addon are not breaking things). Similar to https://www.npmjs.com/package/@apollo/server-integration-testsuite.

@KeremTurkyilmaz We first need to fix the major bugs in the nuxt module. Help moving this forward is of course very welcome!

valentinpalkovic · 2024-08-07T05:28:15Z

@tobiasdiez Unfortunately, we don't have a dedicated testsuite solution like Apollo does. :/

tobiasdiez · 2024-08-23T11:17:26Z

I've added a nuxt sandbox, but not sure if I did it correctly (it appears it is not run as part of the ci)

Revert "Revert: Nuxt support"

b9bf7d3

valentinpalkovic changed the title ~~Revert "Revert: Nuxt support"~~ CLI: Add Nuxt support Jul 15, 2024

valentinpalkovic changed the title ~~CLI: Add Nuxt support~~ CLI: Re-Add Nuxt support Jul 15, 2024

valentinpalkovic self-assigned this Jul 15, 2024

valentinpalkovic added ci:normal feature request cli labels Jul 15, 2024

valentinpalkovic added ci:normal and removed ci:normal labels Jul 15, 2024

ndelangen added a commit that referenced this pull request Jul 15, 2024

Hopefully fix this problem:

9dfaafe

#28607 (comment)

ndelangen mentioned this pull request Jul 15, 2024

React: Bundle in lodash #28609

Merged

8 tasks

tobiasdiez mentioned this pull request Jul 16, 2024

Error when run npx storybook-nuxt init nuxt-modules/storybook#721

Open

tobiasdiez mentioned this pull request Aug 13, 2024

docs: update installation instructions to use new Storybook CLI nuxt-modules/storybook#659

Draft

ndelangen added 2 commits August 14, 2024 14:34

Merge branch 'next' into revert-28479-revert/26884

ac0b619

dedupe

a729e4f

ndelangen self-assigned this Aug 14, 2024

ndelangen and others added 2 commits August 14, 2024 14:50

fixes

0356e44

Merge branch 'next' into revert-28479-revert/26884

7849598

add nuxt sandbox

846bf4b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CLI: Re-Add Nuxt support #28607

CLI: Re-Add Nuxt support #28607

valentinpalkovic commented Jul 15, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Jul 15, 2024 •

edited

Loading

valentinpalkovic commented Jul 15, 2024

valentinpalkovic commented Jul 15, 2024

tobiasdiez commented Jul 15, 2024

tobiasdiez commented Jul 15, 2024

valentinpalkovic commented Jul 16, 2024

tobiasdiez commented Jul 20, 2024

kasperpeulen commented Jul 22, 2024

valentinpalkovic commented Jul 24, 2024

KeremTurkyilmaz commented Jul 29, 2024

tobiasdiez commented Aug 3, 2024

valentinpalkovic commented Aug 7, 2024

tobiasdiez commented Aug 23, 2024

CLI: Re-Add Nuxt support #28607

Are you sure you want to change the base?

CLI: Re-Add Nuxt support #28607

Conversation

valentinpalkovic commented Jul 15, 2024 • edited by storybook-pr-benchmarking bot Loading

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

nx-cloud bot commented Jul 15, 2024 • edited Loading

☁️ Nx Cloud Report

valentinpalkovic commented Jul 15, 2024

valentinpalkovic commented Jul 15, 2024

tobiasdiez commented Jul 15, 2024

tobiasdiez commented Jul 15, 2024

valentinpalkovic commented Jul 16, 2024

tobiasdiez commented Jul 20, 2024

kasperpeulen commented Jul 22, 2024

valentinpalkovic commented Jul 24, 2024

KeremTurkyilmaz commented Jul 29, 2024

tobiasdiez commented Aug 3, 2024

valentinpalkovic commented Aug 7, 2024

tobiasdiez commented Aug 23, 2024

valentinpalkovic commented Jul 15, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Jul 15, 2024 •

edited

Loading