Storybook logs huge errors/warnings on every nuxt dev build

[sarayourfriend]

Current Situation

Storybook logs a huge amount of errors/warnings when building the frontend:

WARN The following packages are incompatible with Storybook 8.2.7 as they depend on different major versions of Storybook packages:
WARN - @nuxtjs/storybook@8.3.0-28764731.a9bf66d
WARN  Repo: https://storybook.nuxtjs.org
WARN - @storybook-vue/nuxt@8.3.0-28764731.a9bf66d
WARN  Repo: https://storybook.nuxtjs.org
WARN - storybook@8.2.9
WARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/lib/cli
WARN - @storybook/vue3@8.2.9
WARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/renderers/vue3
WARN - @storybook/addon-links@8.2.9
WARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/links
WARN - @storybook/builder-vite@8.2.9
WARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme
WARN - @storybook/addon-essentials@8.2.9
WARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/essentials
WARN - @storybook/addon-interactions@8.2.9
WARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/interactions
WARN - @storybook/test@8.2.9
WARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/lib/test
WARN - @storybook/blocks@8.2.9
WARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/lib/blocks
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

[nuxt:storybook:build 1:18:38 AM]  ERROR  Storybook failed to load the following preset: @storybook-vue/nuxt/preset.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

/home/sara/projects/openverse/node_modules/.pnpm/ufo@1.5.4/node_modules/ufo/dist/index.mjs:630
export { $URL, cleanDoubleSlashes, createURL, decode, decodePath, decodeQueryKey, decodeQueryValue, encode, encodeHash, encodeHost, encodeParam, encodePath, encodeQueryItem, encodeQueryKey, encodeQueryValue, getQuery, hasLeadingSlash, hasProtocol, hasTrailingSlash, isEmptyURL, isEqual, isNonEmptyURL, isRelative, isSamePath, isScriptProtocol, joinRelativeURL, joinURL, normalizeURL, parseAuth, parseFilename, parseHost, parsePath, parseQuery, parseURL, resolveURL, stringifyParsedURL, stringifyQuery, withBase, withFragment, withHttp, withHttps, withLeadingSlash, withProtocol, withQuery, withTrailingSlash, withoutBase, withoutFragment, withoutHost, withoutLeadingSlash, withoutProtocol, withoutTrailingSlash };
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Object.newLoader [as .mjs] (/home/sara/projects/openverse/node_modules/.pnpm/esbuild-register@3.6.0_esbuild@0.21.5/node_modules/esbuild-register/dist/node.js:2262:9)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/home/sara/projects/openverse/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.cjs:6:13)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)

More info: 


  
  Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
  
  If you believe this is a bug, please open an issue on Github.
  
  /home/sara/projects/openverse/node_modules/.pnpm/ufo@1.5.4/node_modules/ufo/dist/index.mjs:630
  export { $URL, cleanDoubleSlashes, createURL, decode, decodePath, decodeQueryKey, decodeQueryValue, encode, encodeHash, encodeHost, encodeParam, encodePath, encodeQueryItem, encodeQueryKey, encodeQueryValue, getQuery, hasLeadingSlash, hasProtocol, hasTrailingSlash, isEmptyURL, isEqual, isNonEmptyURL, isRelative, isSamePath, isScriptProtocol, joinRelativeURL, joinURL, normalizeURL, parseAuth, parseFilename, parseHost, parsePath, parseQuery, parseURL, resolveURL, stringifyParsedURL, stringifyQuery, withBase, withFragment, withHttp, withHttps, withLeadingSlash, withProtocol, withQuery, withTrailingSlash, withoutBase, withoutFragment, withoutHost, withoutLeadingSlash, withoutProtocol, withoutTrailingSlash };
  ^^^^^^
  
  SyntaxError: Unexpected token 'export'
  at wrapSafe (node:internal/modules/cjs/loader:1281:20)
  at Module._compile (node:internal/modules/cjs/loader:1321:27)
  at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
  at Object.newLoader [as .mjs] (/home/sara/projects/openverse/node_modules/.pnpm/esbuild-register@3.6.0_esbuild@0.21.5/node_modules/esbuild-register/dist/node.js:2262:9)
  at Module.load (node:internal/modules/cjs/loader:1208:32)
  at Module._load (node:internal/modules/cjs/loader:1024:12)
  at Module.require (node:internal/modules/cjs/loader:1233:19)
  at require (node:internal/modules/helpers:179:18)
  at Object.<anonymous> (/home/sara/projects/openverse/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.cjs:6:13)
  at Module._compile (node:internal/modules/cjs/loader:1358:14)
  
  More info:
  
  at loadPreset (/home/sara/projects/openverse/node_modules/.pnpm/@storybook+core@8.2.9/node_modules/@storybook/core/dist/common/index.js:150248:13)


 WARN                                                                    nuxt:storybook:build 1:18:38 AM
          Broken build, fix the error above.
          You may need to refresh the browser.
        

? Would you like to help improve Storybook by sending anonymous crash reports? › (Y/n)  ➜ DevTools: press Shift + Alt + D in the browser (v1.4.1)                                   1:18:39 AM

ℹ Tailwind Viewer: http://0.0.0.0:8443/_tailwind/                           nuxt:tailwindcss 1:18:39 AM
✖ Would you like to help improve Storybook by sending anonymous crash reports? … yes
attention => Storybook now collects completely anonymous telemetry regarding usage.           1:18:40 AM
This information is used to shape Storybook's roadmap and prioritize features.                1:18:40 AM
[1:18:40 AM] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry                                                            1:18:40 AM
✔ Vite client built in 16ms                                                                  1:18:41 AM
✔ Vite server built in 937ms                                                                 1:18:42 AM

[1:18:42 AM]  ERROR  [unhandledRejection] Storybook failed to load the following preset: @storybook-vue/nuxt/preset.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

/home/sara/projects/openverse/node_modules/.pnpm/ufo@1.5.4/node_modules/ufo/dist/index.mjs:630
export { $URL, cleanDoubleSlashes, createURL, decode, decodePath, decodeQueryKey, decodeQueryValue, encode, encodeHash, encodeHost, encodeParam, encodePath, encodeQueryItem, encodeQueryKey, encodeQueryValue, getQuery, hasLeadingSlash, hasProtocol, hasTrailingSlash, isEmptyURL, isEqual, isNonEmptyURL, isRelative, isSamePath, isScriptProtocol, joinRelativeURL, joinURL, normalizeURL, parseAuth, parseFilename, parseHost, parsePath, parseQuery, parseURL, resolveURL, stringifyParsedURL, stringifyQuery, withBase, withFragment, withHttp, withHttps, withLeadingSlash, withProtocol, withQuery, withTrailingSlash, withoutBase, withoutFragment, withoutHost, withoutLeadingSlash, withoutProtocol, withoutTrailingSlash };
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Object.newLoader [as .mjs] (/home/sara/projects/openverse/node_modules/.pnpm/esbuild-register@3.6.0_esbuild@0.21.5/node_modules/esbuild-register/dist/node.js:2262:9)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/home/sara/projects/openverse/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.cjs:6:13)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)

More info: 


  
  Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
  
  If you believe this is a bug, please open an issue on Github.
  
  /home/sara/projects/openverse/node_modules/.pnpm/ufo@1.5.4/node_modules/ufo/dist/index.mjs:630
  export { $URL, cleanDoubleSlashes, createURL, decode, decodePath, decodeQueryKey, decodeQueryValue, encode, encodeHash, encodeHost, encodeParam, encodePath, encodeQueryItem, encodeQueryKey, encodeQueryValue, getQuery, hasLeadingSlash, hasProtocol, hasTrailingSlash, isEmptyURL, isEqual, isNonEmptyURL, isRelative, isSamePath, isScriptProtocol, joinRelativeURL, joinURL, normalizeURL, parseAuth, parseFilename, parseHost, parsePath, parseQuery, parseURL, resolveURL, stringifyParsedURL, stringifyQuery, withBase, withFragment, withHttp, withHttps, withLeadingSlash, withProtocol, withQuery, withTrailingSlash, withoutBase, withoutFragment, withoutHost, withoutLeadingSlash, withoutProtocol, withoutTrailingSlash };
  ^^^^^^
  
  SyntaxError: Unexpected token 'export'
  at wrapSafe (node:internal/modules/cjs/loader:1281:20)
  at Module._compile (node:internal/modules/cjs/loader:1321:27)
  at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
  at Object.newLoader [as .mjs] (/home/sara/projects/openverse/node_modules/.pnpm/esbuild-register@3.6.0_esbuild@0.21.5/node_modules/esbuild-register/dist/node.js:2262:9)
  at Module.load (node:internal/modules/cjs/loader:1208:32)
  at Module._load (node:internal/modules/cjs/loader:1024:12)
  at Module.require (node:internal/modules/cjs/loader:1233:19)
  at require (node:internal/modules/helpers:179:18)
  at Object.<anonymous> (/home/sara/projects/openverse/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.cjs:6:13)
  at Module._compile (node:internal/modules/cjs/loader:1358:14)
  
  More info:
  
  at loadPreset (/home/sara/projects/openverse/node_modules/.pnpm/@storybook+core@8.2.9/node_modules/@storybook/core/dist/common/index.js:150248:13)

Suggested Improvement

Address the errors.

Benefit

We should not have integrations where the integrated tools tell us they are not correctly integrated. It is also confusing to see these warnings and not know immediately whether something you have changed caused them, or what the action is to resolve them.

[obulat]

There's an upstream PR that will hopefully fix this problem: fix: remove Storybook version from storybook.ts

[sarayourfriend]

Ah okay, so nothing for us to do here, right? We can close this if so.

[sarayourfriend]

Closing this as won't fix, because it's an upstream issue. Olga's PR got merged, so we're just waiting for a new version of storybook to release and we'll be able to fix this.