Open alniv94 opened 1 year ago
same here
even on existing nuxt project still got the same error.
@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
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
@g1ronn1mo What if you try it like that? npx storybook@latest init --type vue3
as mentioned here #5
@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.
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"
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
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
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
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.
@LABCAT good workaround tho, please use 'npx storybook-nuxt@latest init ' & let me know
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.
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.
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.
WARN Broken build, fix the error above. WARN You may need to refresh the browser.
ELIFECYCLE Command failed with exit code 1.
This is the installed version: "@storybook-vue/nuxt": "0.0.1-rc.20",
iside my jackage.json
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.
![image](https://github.com/storybook-vue/nuxt/assets/89484751/a02da8a3-e1f5-476c-95fe-8a21109da8fc)