Error code EUNSUPPORTEDPROTOCOL when installing on Nuxt project

[alniv94]

I created blank nuxt project and install this package using npx storybook-nuxt init command, but got this error:

I tried with stackblitz got the same error.

[g1ronn1mo]

same here

[alniv94]

even on existing nuxt project still got the same error.

[LABCAT]

@alniv1234 and @g1ronn1mo I was able to get around this issue by copying the package.json here into my existing project:
https://github.com/storybook-vue/storybook-nuxt-demo/blob/master/package.json

I also copied this folder into my project:
https://github.com/storybook-vue/storybook-nuxt-demo/tree/master/.storybook

[g1ronn1mo]

updated my package.json:

{
  "type": "module",
  "private": true,
  "packageManager": "[email protected]",
  "scripts": {
    "build": "NUXT_APP_BASE_URL=/openbis/webapp/example-webapp/  nuxi build  --prerender  && mv .output/public/ .output/html && cp -fR .output/html C:/Users/benes/Scripts/openbis-server/state/core-plugins/test-module/1/as/webapps/example-webapp",
    "dev": "NUXT_APP_BASE_URL=/test/webapp/example-webapp/ nuxi dev",
    "dev:pwa": "VITE_PLUGIN_PWA=true nuxi dev",
    "start": "node .output/server/index.mjs",
    "lint": "eslint .",
    "postinstall": "nuxi prepare",
    "generate": "nuxi generate",
    "start:generate": "npx serve .output/public",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^0.35.3",
    "@iconify-json/carbon": "^1.1.18",
    "@iconify-json/twemoji": "^1.1.11",
    "@nuxt/devtools": "^0.2.5",
    "@nuxtjs/color-mode": "^3.3.0",
    "@pinia/nuxt": "^0.4.11",
    "@storybook-vue/nuxt": "0.0.1-rc.4",
    "@storybook/addon-essentials": "7.1.1",
    "@storybook/addon-interactions": "7.1.1",
    "@storybook/addon-links": "7.1.1",
    "@storybook/blocks": "7.1.1",
    "@storybook/types": "7.1.1",
    "@types/bootstrap": "^5.2.6",
    "@types/jquery": "^3.5.16",
    "@types/lodash": "^4.14.195",
    "@types/node": "^18.16.19",
    "@unocss/nuxt": "^0.49.8",
    "@vite-pwa/nuxt": "^0.0.7",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue-macros/nuxt": "^1.3.12",
    "@vue/babel-plugin-jsx": "^1.1.5",
    "@vueuse/nuxt": "^9.13.0",
    "css-loader": "5.2.0",
    "cypress": "^12.17.2",
    "eslint": "^8.43.0",
    "eslint-plugin-storybook": "^0.6.12",
    "nuxt": "^3.6.5",
    "nuxt-lodash": "^2.5.0",
    "pinia": "^2.1.4",
    "postcss": "8",
    "storybook": "7.1.1",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6",
    "vue-tsc": "^1.8.8",
    "vite": "^4.4.7"
  },
  "dependencies": {
    "@formkit/nuxt": "^0.16.5",
    "@jridgewell/sourcemap-codec": "^1.4.15",
    "@mdi/font": "^7.2.96",
    "@nuxt/test-utils": "^3.6.5",
    "@nuxt/webpack-builder": "^3.6.1",
    "@nuxtjs/proxy": "^2.1.0",
    "@popperjs/core": "^2.11.8",
    "@socheatsok78/storybook-addon-vuetify": "^0.1.9",
    "@storybook/codemod": "^7.2.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "auto-bind": "^5.0.1",
    "bootstrap": "5.3.0-alpha1",
    "http-proxy-middleware": "^2.0.6",
    "i": "^0.3.7",
    "lodash": "^4.17.21",
    "lodash-es": "^4.17.21",
    "lodash.product": "^18.10.0",
    "material-design-icons-iconfont": "^6.7.0",
    "pnpm": "^8.6.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "requirejs": "^2.3.6",
    "rollup": "3.27.0",
    "sass": "^1.63.6",
    "sb-nuxt-fork": "0.0.10-development",
    "unplugin-auto-import": "^0.16.6",
    "unplugin-vue-components": "^0.25.1",
    "vite-plugin-vuetify": "^1.0.2",
    "vue3-form-wizard": "^0.2.1",
    "vuetify": "^3.3.6",
    "workbox-cacheable-response": "^7.0.0",
    "zod": "^3.21.4"
  },
  "eslintConfig": {
    "extends": [
      "plugin:storybook/recommended"
    ]
  }
}

ran pnpm i

ran npx storybook-nuxt@latest init

got error:

 npx storybook-nuxt@latest init 
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:*

npm ERR! A complete log of this run can be found in: C:\Users\benes\AppData\Local\npm-cache\_logs\2023-08-03T07_59_40_950Z-debug-0.log

[LucaMargadant]

@g1ronn1mo What if you try it like that? npx storybook@latest init --type vue3 as mentioned here #5

[alniv94]

@g1ronn1mo What if you try it like that? npx storybook@latest init --type vue3 as mentioned here #5

this if for vue 3 and not this package.

[g1ronn1mo]

This works even less. This sets:

framework: { name: "@storybook/vue3-vite",

and when I try to change it back to @storybook-vue/nuxt I got Failed to load preset: "@storybook-vue\\nuxt\\preset"

[g1ronn1mo]

This is the full log:
0 verbose cli C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:C:\Program Files\nodejs\node_modules\npm\npmrc Completed in 2ms
6 timing config:load:builtin Completed in 2ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:C:\Users\benes\Scripts\nuxt3-frontend-webapp.npmrc Completed in 0ms
10 timing config:load:project Completed in 1ms
11 timing config:load:file:C:\Users\benes.npmrc Completed in 1ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:C:\Users\benes\AppData\Roaming\npm\etc\npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:setEnvs Completed in 1ms
16 timing config:load Completed in 8ms
17 timing npm:load:configload Completed in 9ms
18 timing config:load:flatten Completed in 1ms
19 timing npm:load:mkdirpcache Completed in 0ms
20 timing npm:load:mkdirplogs Completed in 0ms
21 verbose title npm exec storybook-nuxt@latest init
22 verbose argv "exec" "--" "storybook-nuxt@latest" "init"
23 timing npm:load:setTitle Completed in 1ms
24 timing npm:load:display Completed in 0ms
25 verbose logfile logs-max:10 dir:C:\Users\benes\AppData\Local\npm-cache_logs\2023-08-03T09_36_29_892Z-
26 verbose logfile C:\Users\benes\AppData\Local\npm-cache_logs\2023-08-03T09_36_29_892Z-debug-0.log
27 timing npm:load:logFile Completed in 6ms
28 timing npm:load:timers Completed in 0ms
29 timing npm:load:configScope Completed in 0ms
30 timing npm:load Completed in 39ms
31 silly logfile start cleaning logs, removing 7 files
32 timing arborist:ctor Completed in 0ms
33 silly logfile done cleaning log files
34 http fetch GET 200 https://registry.npmjs.org/storybook-nuxt 787ms (cache revalidated)
35 timing arborist:ctor Completed in 0ms
36 timing arborist:ctor Completed in 0ms
37 timing arborist:ctor Completed in 0ms
38 timing idealTree:init Completed in 3ms
39 timing idealTree:userRequests Completed in 0ms
40 silly idealTree buildDeps
41 silly fetch manifest [email protected]
42 http fetch GET 200 https://registry.npmjs.org/storybook-nuxt 4ms (cache hit)
43 silly placeDep ROOT [email protected] OK for: want: 7.2.1
44 silly fetch manifest @storybook-nuxt/cli@latest
45 silly fetch manifest @storybook/cli@latest
46 http fetch GET 200 https://registry.npmjs.org/@storybook%2fcli 206ms (cache updated)
47 http fetch GET 200 https://registry.npmjs.org/@storybook-nuxt%2fcli 454ms (cache revalidated)
48 timing idealTree:#root Completed in 462ms
49 silly placeDep ROOT @storybook-nuxt/[email protected] OK for: [email protected] want: latest
50 silly fetch manifest @babel/core@^7.22.9
51 silly fetch manifest @babel/preset-env@^7.22.9
52 silly fetch manifest @babel/types@^7.22.5
53 silly fetch manifest @ndelangen/get-tarball@^3.0.7
54 timing idealTree Completed in 471ms
55 timing command:exec Completed in 12555ms
56 verbose stack Error: Unsupported URL Type "workspace:": workspace:*
56 verbose stack at unsupportedURLType (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-package-arg\lib\npa.js:327:15)
56 verbose stack at fromURL (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-package-arg\lib\npa.js:387:13)
56 verbose stack at Function.resolve (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-package-arg\lib\npa.js:83:12)
56 verbose stack at visit (C:\Program Files\nodejs\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\build-ideal-tree.js:1020:39)
56 verbose stack at visitNode (C:\Program Files\nodejs\node_modules\npm\node_modules\treeverse\lib\depth-descent.js:58:25)
56 verbose stack at next (C:\Program Files\nodejs\node_modules\npm\node_modules\treeverse\lib\depth-descent.js:44:19)
56 verbose stack at depth (C:\Program Files\nodejs\node_modules\npm\node_modules\treeverse\lib\depth-descent.js:83:10)
56 verbose stack at depth (C:\Program Files\nodejs\node_modules\npm\node_modules\treeverse\lib\depth.js:27:12)
56 verbose stack at #buildDepStep (C:\Program Files\nodejs\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\build-ideal-tree.js:949:7)
56 verbose stack at async Arborist.buildIdealTree (C:\Program Files\nodejs\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\build-ideal-tree.js:196:7)
57 verbose cwd C:\Users\benes\Scripts\nuxt3-frontend-webapp
58 verbose Windows_NT 10.0.22621
59 verbose node v20.5.0
60 verbose npm v9.8.0
61 error code EUNSUPPORTEDPROTOCOL
62 error Unsupported URL Type "workspace:": workspace:*
63 verbose exit 1
64 timing npm Completed in 12782ms
65 verbose unfinished npm timer reify 1691055402200
66 verbose unfinished npm timer reify:loadTrees 1691055402200
67 verbose unfinished npm timer idealTree:buildDeps 1691055402205
68 verbose unfinished npm timer idealTree:node_modules/storybook-nuxt 1691055402668
69 verbose code 1
70 error A complete log of this run can be found in: C:\Users\benes\AppData\Local\npm-cache_logs\2023-08-03T09_36_29_892Z-debug-0.log

[g1ronn1mo]

This is with: dlx storybook-nuxt@latest init

 ERR_PNPM_WORKSPACE_PKG_NOT_FOUND  In ....\AppData\Local\pnpm\store\v3\tmp\dlx-34340: "@storybook/codemod@workspace:*" is in the dependencies but no package named "@storybook/codemod" is present in the workspace

This error happened while installing the dependencies of [email protected]
at @storybook-nuxt/[email protected]

Next I tried $ pnpm i @storybook/codemod
 WARN  deprecated [email protected]: [email protected]
 WARN  deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
 WARN  deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
Already up to date
Progress: resolved 1891, reused 1846, downloaded 0, added 0, done
Done in 10.7s

[chakAs3]

Hi @g1ronn1mo @alniv1234 @LucaMargadant sorry Guys cause i was doing some test for CI, that is why was breaking.

Please you can test now with
npx storybook-nuxt@latest init

and let me know.

[chakAs3]

@LABCAT
good workaround tho, please use 'npx storybook-nuxt@latest init ' & let me know

[g1ronn1mo]

I deleted all depenedcies for storybook and ran pnpm i that I got a clean project.

Ater running npx storybook-nuxt@latest init I got

storybook init - the simplest way to add a Storybook to your project.

• Detecting project type. ✓
• Preparing to install dependencies. ✓

• Installing dependenciesLockfile is up to date, resolution step is skipped
Already up to date

@ postinstall C:\Users\benes\Scripts\nuxt3-frontend-webapp

@ postinstall C:\Users\benes\Scripts\nuxt3-frontend-webapp
nuxi prepare

Nuxi 3.6.5
1:45:02 PM
✔ Types generated in .nuxt
1:45:03 PM
Done in 3.2s
. ✓
• Detected Vite project. Setting builder to Vite. ✓
• Adding Storybook support to your "Nuxt" app
✔ Getting the correct version of 8 packages
√ We have detected that you're using ESLint. Storybook provides a plugin that gives the best experience with Storybook and helps follow best practices: https://github.com/storybookjs/eslint-plugin-storybook#readme

Would you like to install it? ... yes
Configuring eslint-plugin-storybook in your package.json
✔ Installing Storybook dependencies
. ✓
• Preparing to install dependencies. ✓

• Installing dependenciesLockfile is up to date, resolution step is skipped
Already up to date

@ postinstall C:\Users\benes\Scripts\nuxt3-frontend-webapp
nuxi prepare

Nuxi 3.6.5 1:45:21 PM
✔ Types generated in .nuxt 1:45:23 PM
Done in 3.7s
. ✓
╭──────────────────────────────────────────────────────────────────────────────╮
│ │
│ Storybook was successfully installed in your project! 🎉 │
│ To run Storybook manually, run pnpm run storybook. CTRL+C to stop. │
│ │
│ Wanna know more about Storybook? Check out https://storybook.js.org/ │
│ Having trouble or want to chat? Join us at https://discord.gg/storybook/ │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯

Running Storybook

@ storybook C:\Users\benes\Scripts\nuxt3-frontend-webapp
storybook dev -p 6006 "--quiet"

@storybook/cli v7.2.2-alpha.0

WARN Failed to load preset: "@storybook-vue\nuxt\preset"
ERR! C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm@storybook-vue+nuxt@0.0.1-rc.20_@types+node@18.16.19_@vue+compiler-core@[email protected]_n_rg23upgvnqfqp4dsbzknapfhkq\node_modules@storybook-vue\nuxt\dist\preset.mjs:1
ERR! import { resolve, join } from 'path';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR! at internalCompileFunction (node:internal/vm:73:18)
ERR! at wrapSafe (node:internal/modules/cjs/loader:1153:20)
ERR! at Module.compile (node:internal/modules/cjs/loader:1197:27)
ERR! at Module.extensions..js (node:internal/modules/cjs/loader:1287:10)
ERR! at Object.newLoader [as .mjs] (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm\[email protected][email protected]\node_modules\esbuild-register\dist\node.js:2262:9)
ERR! at Module.load (node:internal/modules/cjs/loader:1091:32)
ERR! at Module.load (node:internal/modules/cjs/loader:938:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1115:19)
ERR! at require (node:internal/modules/helpers:119:18)
ERR! at Object. (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm@[email protected]@types[email protected]@VUE+compiler-core@[email protected]_n_rg23upgvnqfqp4dsbzknapfhkq\node_modules@storybook-vue\nuxt\preset.js:1:18)
ERR! C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm@[email protected]@types+node@18.16.19_@vue+compiler-core@[email protected]_n_rg23upgvnqfqp4dsbzknapfhkq\node_modules@storybook-vue\nuxt\dist\preset.mjs:1
ERR! import { resolve, join } from 'path';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR! at internalCompileFunction (node:internal/vm:73:18)
ERR! at wrapSafe (node:internal/modules/cjs/loader:1153:20)
ERR! at Module._compile (node:internal/modules/cjs/loader:1197:27)
ERR! at Module.extensions..js (node:internal/modules/cjs/loader:1287:10)
ERR! at Object.newLoader [as .mjs] (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm\[email protected][email protected]\node_modules\esbuild-register\dist\node.js:2262:9)
ERR! at Module.load (node:internal/modules/cjs/loader:1091:32)
ERR! at Module.load (node:internal/modules/cjs/loader:938:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1115:19)
ERR! at require (node:internal/modules/helpers:119:18)
ERR! at Object. (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm@[email protected]@types[email protected]@VUE+compiler-core@[email protected]_n_rg23upgvnqfqp4dsbzknapfhkq\node_modules@storybook-vue\nuxt\preset.js:1:18)
ERR! Error: Invariant failed: No builder configured in core.builder
ERR! at invariant (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm\[email protected]\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:14:11)
ERR! at buildDevStandalone (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm@[email protected]\node_modules@storybook\core-server\dist\index.js:128:1790)
ERR! at async withTelemetry (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm@[email protected]\node_modules@storybook\core-server\dist\index.js:113:3910)
ERR! at async dev (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm@[email protected]\node_modules@storybook\cli\dist\generate.js:457:401)
ERR! at async Command. (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm@[email protected]\node_modules@storybook\cli\dist\generate.js:459:225)
ERR! Error: Invariant failed: No builder configured in core.builder
ERR! at invariant (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm\[email protected]\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:14:11)
ERR! at buildDevStandalone (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm@[email protected]\node_modules@storybook\core-server\dist\index.js:128:1790)
ERR! at async withTelemetry (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm@[email protected]\node_modules@storybook\core-server\dist\index.js:113:3910)
ERR! at async dev (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm@[email protected]\node_modules@storybook\cli\dist\generate.js:457:401)
ERR! at async Command. (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm@[email protected]\node_modules@storybook\cli\dist\generate.js:459:225)

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

 ELIFECYCLE  Command failed with exit code 1.

[g1ronn1mo]

This is the installed version: "@storybook-vue/nuxt": "0.0.1-rc.20", iside my jackage.json