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 [email protected] sandbox or in an existing project with npx [email protected] 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	77.4 MB	77.4 MB	12 B	1.89	0%
initSize	162 MB	162 MB	382 kB	3	0.2%
diffSize	84.7 MB	85.1 MB	382 kB	10.52	0.4%
buildSize	7.52 MB	7.52 MB	0 B	1.11	0%
buildSbAddonsSize	1.62 MB	1.62 MB	0 B	1.14	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.34 MB	2.34 MB	0 B	1.11	0%
buildSbPreviewSize	352 kB	352 kB	0 B	-	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.51 MB	4.51 MB	0 B	1.11	0%
buildPreviewSize	3.01 MB	3.01 MB	0 B	1.11	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	7.5s	22.3s	14.7s	1.25	🔺66%
generateTime	22.8s	22.7s	-89ms	1.32	-0.4%
initTime	18.1s	18.8s	729ms	1.18	3.9%
buildTime	11.4s	10.9s	-509ms	-0.73	-4.6%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	6.2s	6.3s	134ms	-0.81	2.1%
devManagerResponsive	4s	4.1s	39ms	-0.7	0.9%
devManagerHeaderVisible	702ms	811ms	109ms	-0.03	13.4%
devManagerIndexVisible	735ms	863ms	128ms	0.05	14.8%
devStoryVisibleUncached	1.1s	1.2s	73ms	-0.72	5.9%
devStoryVisible	736ms	864ms	128ms	0.06	14.8%
devAutodocsVisible	616ms	695ms	79ms	-0.3	11.4%
devMDXVisible	667ms	637ms	-30ms	-0.78	-4.7%
buildManagerHeaderVisible	734ms	718ms	-16ms	-0.29	-2.2%
buildManagerIndexVisible	744ms	835ms	91ms	0.48	10.9%
buildStoryVisible	776ms	750ms	-26ms	-0.47	-3.5%
buildAutodocsVisible	630ms	615ms	-15ms	-0.84	-2.4%
buildMDXVisible	639ms	657ms	18ms	-0.21	2.7%

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

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 00ffb6b. 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 [email protected] 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/[email protected]
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 [email protected] init
Running Storybook

SyntaxError: The requested module '/node_modules/.pnpm/[email protected]/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 [email protected] init Running Storybook
SyntaxError: The requested module '/node_modules/.pnpm/[email protected]/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)

valentinpalkovic · 2024-09-10T12:52:23Z

Hi @tobiasdiez

I get the following error when running yarn task --task sandbox --template nuxt-vite/default-ts --debug:

💃 adding stories
Error running task sandbox:
{
  "code": "ERR_INVALID_ARG_TYPE"
}

TypeError: The "paths[1]" argument must be of type string. Received null
    at new NodeError (node:internal/errors:405:5)
    at validateString (node:internal/validators:162:11)
    at resolve (node:path:1097:7)
    at addStories (/Users/valentinpalkovic/Projects/storybook-next/scripts/tasks/sandbox-parts.ts:589:25)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.run (/Users/valentinpalkovic/Projects/storybook-next/scripts/tasks/sandbox.ts:82:7)
    at async runTask (/Users/valentinpalkovic/Projects/storybook-next/scripts/task.ts:316:24)
    at async run (/Users/valentinpalkovic/Projects/storybook-next/scripts/task.ts:473:28) {
  code: 'ERR_INVALID_ARG_TYPE'
}

I guess it has something to do with the Nuxt framework not providing default stories?

tobiasdiez · 2024-09-17T10:32:39Z

We do have default stories in https://github.com/nuxt-modules/storybook/tree/main/packages/storybook-addon/template/cli, but I have no idea how they get installed nor why this would fail in the sandbox. If you give me some pointers where to start, I can look into this.

tobiasdiez · 2024-10-06T14:27:05Z

Can we please get this in as soon as possible? We constantly have people opening issues at the nuxt-storybook module because they configured something wrong. Having the cli integration would make setting this up with nuxt way easier and robust. 🙇

The problem with the sandbox might come from the fact that we don't add the stories under the stories folder but under components

tobiasdiez · 2024-10-13T12:24:20Z

@storybookjs/core, we would greatly appreciate support from the core team regarding the Nuxt-Storybook integration. @chakAs3 and I are working on this in our free time, and unfortunately, we don't have the resources to continually address new issues that arise in the Nuxt module due to upstream changes in Storybook. Many of these issues could be avoided if the Nuxt integration sandbox were included in your test suite.

Additionally, our installation instructions are more complex than necessary because the Storybook CLI still doesn't fully recognize Nuxt projects. Thus new users make mistakes during the setup, and then open issues at the nuxt repo adding to our workload. It would be incredibly helpful if we could get this PR merged as soon as possible.

Could you also review my pending PRs at your earliest convenience? (https://github.com/storybookjs/storybook/pulls/tobiasdiez) If you believe my approach in a PR isn't the right solution (e.g., PR #29172 comment or PR #28595), that’s completely understandable. However, it would be immensely helpful if you would then implement an alternative solution (or at least suggest one). These PRs are not just for theoretical improvements; they address critical issues that make maintaining the Nuxt integration extremely challenging.

Thank you for your time and consideration!

valentinpalkovic · 2024-10-13T12:45:28Z

I have informed the core team and we will try to prioritise this and the mentioned PRs asap.

chakAs3 · 2024-10-16T07:23:17Z

Yes, this has become quite challenging for users. Just last week, I helped a company manually set up Storybook on a large Nuxt project. I had previously built a custom CLI for this, but stopped maintaining it due to the difficulty of keeping it in sync with Storybook's frequent releases.

@tobiasdiez, on a related note, I’m encountering consistent failures when building and publishing Storybook to Chromatic, likely due to the large number of components and insufficient RAM. Have you come across this issue, and is there a recommended solution?

tobiasdiez · 2024-10-16T07:56:25Z

@tobiasdiez, on a related note, I’m encountering consistent failures when building and publishing Storybook to Chromatic, likely due to the large number of components and insufficient RAM. Have you come across this issue, and is there a recommended solution?

I've never experienced such issues with the chromatic-workflow setup in the storybook-nuxt-module repo. I would love to migrate my own projects to the nuxt-module (and thus gain more experience with publishing it to chromatic), but that's currently blocked by various bugs in Storybook.

valentinpalkovic · 2024-10-16T08:28:04Z

I talked to the team, and currently, we are wrapping up the 8.4 release. Next week, I will get the chance to take a proper look and hopefully get the PR merged.

chakAs3 · 2024-10-16T13:20:25Z

chromatic-workflow setup in the storybook-nuxt-module

It works fine on small or medium-sized projects i guess, but the one I’m working on now has hundreds of components, i only started by creating stories for few components. I’m wondering if Storybook’s build process is handling all the components, even those without stories, when generating the static files ? which causing the memory issue

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

valentinpalkovic added 2 commits September 10, 2024 14:43

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

e78c4cc

Update sandbox template for Nuxt v3 (Vite | TypeScript)

00ffb6b

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

valentinpalkovic commented Sep 10, 2024

tobiasdiez commented Sep 17, 2024

tobiasdiez commented Oct 6, 2024 •

edited

Loading

tobiasdiez commented Oct 13, 2024

valentinpalkovic commented Oct 13, 2024

chakAs3 commented Oct 16, 2024

tobiasdiez commented Oct 16, 2024

valentinpalkovic commented Oct 16, 2024

chakAs3 commented Oct 16, 2024 •

edited

Loading

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 Sep 10, 2024

tobiasdiez commented Sep 17, 2024

tobiasdiez commented Oct 6, 2024 • edited Loading

tobiasdiez commented Oct 13, 2024

valentinpalkovic commented Oct 13, 2024

chakAs3 commented Oct 16, 2024

tobiasdiez commented Oct 16, 2024

valentinpalkovic commented Oct 16, 2024

chakAs3 commented Oct 16, 2024 • edited Loading

valentinpalkovic commented Jul 15, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Jul 15, 2024 •

edited

Loading

tobiasdiez commented Oct 6, 2024 •

edited

Loading

chakAs3 commented Oct 16, 2024 •

edited

Loading