search

storybook-vue / storybook-nuxt

Deprecated in favor of https://github.com/nuxt-modules/storybook/
https://github.com/nuxt-modules/storybook/
134 stars 20 forks source link

Error code EUNSUPPORTEDPROTOCOL when installing on Nuxt project #12

Open alniv94 opened 1 year ago

alniv94 commented 1 year ago

I created blank nuxt project and install this package using npx storybook-nuxt init command, but got this error: image I tried with stackblitz got the same error. image

g1ronn1mo commented 1 year ago

same here

alniv94 commented 1 year ago

even on existing nuxt project still got the same error.

LABCAT commented 1 year ago

@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 commented 1 year ago

updated my package.json: 

{
  "type": "module",
  "private": true,
  "packageManager": "pnpm@7.29.3",
  "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:
  storybook-nuxt@7.2.1
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 commented 1 year ago

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

alniv94 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 npm@9.8.0 2 info using node@v20.5.0 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 storybook-nuxt@7.2.1 42 http fetch GET 200 https://registry.npmjs.org/storybook-nuxt 4ms (cache hit) 43 silly placeDep ROOT storybook-nuxt@7.2.1 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/cli@7.2.0 OK for: storybook-nuxt@7.2.1 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 commented 1 year ago

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 storybook-nuxt@7.2.1 at @storybook-nuxt/cli@7.2.0

Next I tried $ pnpm i @storybook/codemod  WARN  deprecated workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0  WARN  deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser  WARN  deprecated sourcemap-codec@1.4.8: 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 commented 1 year ago

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 commented 1 year ago

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

g1ronn1mo commented 1 year ago

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\nodemodules.pnpm\@storybook-vue+nuxt@0.0.1-rc.20@types+node@18.16.19_@vue+compiler-core@3.3.4_eslint@8.43.0_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\esbuild-register@3.4.2_esbuild@0.18.17\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\nodemodules.pnpm\@storybook-vue+nuxt@0.0.1-rc.20@types+node@18.16.19_@vue+compiler-core@3.3.4_eslint@8.43.0_n_rg23upgvnqfqp4dsbzknapfhkq\node_modules\@storybook-vue\nuxt\preset.js:1:18) ERR! C:\Users\benes\Scripts\nuxt3-frontend-webapp\nodemodules.pnpm\@storybook-vue+nuxt@0.0.1-rc.20@types+node@18.16.19_@vue+compiler-core@3.3.4_eslint@8.43.0_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\esbuild-register@3.4.2_esbuild@0.18.17\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\nodemodules.pnpm\@storybook-vue+nuxt@0.0.1-rc.20@types+node@18.16.19_@vue+compiler-core@3.3.4_eslint@8.43.0_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\tiny-invariant@1.3.1\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:14:11)
ERR! at buildDevStandalone (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm\@storybook+core-server@7.2.2-alpha.0\node_modules\@storybook\core-server\dist\index.js:128:1790) ERR! at async withTelemetry (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm\@storybook+core-server@7.2.2-alpha.0\node_modules\@storybook\core-server\dist\index.js:113:3910) ERR! at async dev (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm\@storybook+cli@7.2.2-alpha.0\node_modules\@storybook\cli\dist\generate.js:457:401)
ERR! at async Command. (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm\@storybook+cli@7.2.2-alpha.0\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\tiny-invariant@1.3.1\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:14:11)
ERR! at buildDevStandalone (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm\@storybook+core-server@7.2.2-alpha.0\node_modules\@storybook\core-server\dist\index.js:128:1790) ERR! at async withTelemetry (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm\@storybook+core-server@7.2.2-alpha.0\node_modules\@storybook\core-server\dist\index.js:113:3910) ERR! at async dev (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm\@storybook+cli@7.2.2-alpha.0\node_modules\@storybook\cli\dist\generate.js:457:401)
ERR! at async Command. (C:\Users\benes\Scripts\nuxt3-frontend-webapp\node_modules.pnpm\@storybook+cli@7.2.2-alpha.0\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 commented 1 year ago

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