storybook@^6.2.0 release breaks @nuxtjs/storybook

[lihbr]

Hey! Basically Storybook released a minor that breaks the module. I'm sorry for not submitting a really comprehensive issue, I'm a bit in a hurry right now, hit me up if anything!

• Release note
• Migration instructions

Version

@nuxtjs/storybook: v3.3.1
nuxt: v2.15.3

node: v14.15.3
npm: v6.14.9
yarn: v1.22.10

Reproduction Link

N/A

Steps to reproduce

1. Create a Nuxt.js application: npx create-nuxt-app repro-252
2. Get into it: cd repro-252
3. Install the Storybook module: yarn add --dev @nuxtjs/storybook (or: npm install --save-dev @nuxtjs/storybook
4. Launch Storybook: npx nuxt storybook

What is Expected?

@nuxtjs/storybook should be working.

What is actually happening?

lihbr@mbp-lucie test-storybook % yarn nuxt storybook
yarn run v1.22.10
$ /Users/lihbr/Desktop/test-storybook/node_modules/.bin/nuxt storybook
 WARN  postcss@8.2.8 is installed but ^7.0.32 is expected       21:33:52
internal/modules/cjs/loader.js:969
 throw err;
 ^
Error: Cannot find module ‘@storybook/vue/dist/server/options’
Require stack:
- /Users/lihbr/Desktop/test-storybook/node_modules/@nuxtjs/storybook/dist/index.js
- /Users/lihbr/Desktop/test-storybook/node_modules/@nuxtjs/storybook/dist/cli.js
- /Users/lihbr/Desktop/test-storybook/node_modules/@nuxtjs/storybook/bin/nuxt-storybook.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
  at Function.Module._load (internal/modules/cjs/loader.js:842:27)
  at Module.require (internal/modules/cjs/loader.js:1026:19)
  at require (internal/modules/cjs/helpers.js:72:18)
  at Object.<anonymous> (/Users/lihbr/Desktop/test-storybook/node_modules/@nuxtjs/storybook/dist/index.js:19:35)
  at Module._compile (internal/modules/cjs/loader.js:1138:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
  at Module.load (internal/modules/cjs/loader.js:986:32)
  at Function.Module._load (internal/modules/cjs/loader.js:879:14)
  at Module.require (internal/modules/cjs/loader.js:1026:19) {
 code: ‘MODULE_NOT_FOUND’,
 requireStack: [
  ‘/Users/lihbr/Desktop/test-storybook/node_modules/@nuxtjs/storybook/dist/index.js’,
  ‘/Users/lihbr/Desktop/test-storybook/node_modules/@nuxtjs/storybook/dist/cli.js’,
  ‘/Users/lihbr/Desktop/test-storybook/node_modules/@nuxtjs/storybook/bin/nuxt-storybook.js’
 ]
}
 FATAL  Failed to run command nuxt-storybook:             21:33:52
Error: Command failed with exit code 1: nuxt-storybook
  ╭────────────────────────────────────────────────────────────╮
  │                                                            │
  │  :heavy_multiplication_x: Nuxt Fatal Error                 │
  │                                                            │
  │  Failed to run command `nuxt-storybook`:                   │
  │  Error: Command failed with exit code 1: nuxt-storybook    │
  │                                                            │
  ╰────────────────────────────────────────────────────────────╯
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Workaround

For anyone experiencing the same issue, in the meantime you should be able to fix it this way:

1. Install explicitly @storybook/vue@6.1.21 (and pin other addons to the same version) in your package.json
2. Install vue-loader@15.9.6 to dev dependencies.

Anything else

I tested on Windows and MacOS and ended up with the same output.

Since Storybook doesn't seem to commit to SemVer fully perhaps we should use the tilde range instead of the caret one for referencing its dependencies? This will prevent the module to break on its own every now and then?

cc @arnaudlewis

[javiertoledos]

I confirm @lihbr workaround works.

[vaban-ru]

Confirm

[scoutrul]

Have the same since yesterday ;((

[farnabaz]

This will fix in v3.4.

[lihbr]

Thanks for the heads up @farnabaz, can we consider that one?

Since Storybook doesn't seem to commit to SemVer fully perhaps we should use the tilde range instead of the caret one for referencing its dependencies? This will prevent the module to break on its own every now and then?

[lihbr]

I guess this has been fixed with version 4?

@farnabaz do you want to publish a patch for version 3 users that aren't yet on Nuxt 2.15.3+ or is it "good enough" to tell them to rely on the aforementioned workaround? Let me know, happy to help on a PR!

For anyone experiencing the same issue, in the meantime you should be able to fix it this way:

• Install explicitly @storybook/vue@6.1.21 (and pin other addons to the same version) in your package.json
• Install vue-loader@15.9.6 to dev dependencies.

[farnabaz]

It's good idea to release a patch for v3 users @lihbr
Contribution is more than welcome 🙂

[lihbr]

Cheers~ #260