Maybe I found a Bug using Storybook + vue 3 + quasar

[Sebastian1830]

Describe the bug
I have installed storybook with the following command vue add storybook, the installation was successful, but when I run npm run storybook: serve I get the following error.

93% after chunk asset optimization SourceMapDevToolPlugin(node:20533) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'split' of undefined
    at fromStringWithSourceMap (/home/sebastian/Documentos/PROYECTOS/landing/node_modules/source-list-map/lib/fromStringWithSourceMap.js:15:32)
    at SourceMapSource.listMap (/home/sebastian/Documentos/PROYECTOS/landing/node_modules/webpack-sources/lib/SourceMapSource.js:45:10)
    at ReplaceSource.listMap (/home/sebastian/Documentos/PROYECTOS/landing/node_modules/webpack-sources/lib/ReplaceSource.js:140:26)
    at CachedSource.listMap (/home/sebastian/Documentos/PROYECTOS/landing/node_modules/webpack-sources/lib/CachedSource.js:22:24)
    at ConcatSource.listMap (/home/sebastian/Documentos/PROYECTOS/landing/node_modules/webpack-sources/lib/ConcatSource.js:72:18)
    at ConcatSource.proto.sourceAndMap (/home/sebastian/Documentos/PROYECTOS/landing/node_modules/webpack-sources/lib/SourceAndMapMixin.js:24:16)
    at CachedSource.sourceAndMap (/home/sebastian/Documentos/PROYECTOS/landing/node_modules/webpack-sources/lib/CachedSource.js:58:31)
    at getTaskForFile (/home/sebastian/Documentos/PROYECTOS/landing/node_modules/@storybook/core/node_modules/webpack/lib/SourceMapDevToolPlugin.js:65:30)
    at /home/sebastian/Documentos/PROYECTOS/landing/node_modules/@storybook/core/node_modules/webpack/lib/SourceMapDevToolPlugin.js:215:20
    at Array.forEach (<anonymous>)
    at /home/sebastian/Documentos/PROYECTOS/landing/node_modules/@storybook/core/node_modules/webpack/lib/SourceMapDevToolPlugin.js:186:12
    at SyncHook.eval [as call] (eval at create (/home/sebastian/Documentos/PROYECTOS/landing/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:12:1)
    at SyncHook.lazyCompileHook (/home/sebastian/Documentos/PROYECTOS/landing/node_modules/tapable/lib/Hook.js:154:20)
    at /home/sebastian/Documentos/PROYECTOS/landing/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1413:42
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/sebastian/Documentos/PROYECTOS/landing/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
    at AsyncSeriesHook.lazyCompileHook (/home/sebastian/Documentos/PROYECTOS/landing/node_modules/tapable/lib/Hook.js:154:20)
(node:20533) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
(node:20533) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I am using:

1. node v12.20.2
2. npm v6.14.11

package.json:

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "description": "",
  "scripts": {
    "dev": "quasar dev",
    "lint": "eslint --ext .js,.ts,.vue ./",
    "storybook:build": "vue-cli-service storybook:build -c config/storybook",
    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "@storybook/addon-postcss": "^2.0.0",
    "@vue/cli": "^4.5.11",
    "@vue/cli-service": "^4.5.11",
    "@vue/composition-api": "^0.6.4",
    "core-js": "^3.6.5",
    "quasar": "^1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@quasar/app": "^2.0.0",
    "@storybook/addon-links": "^6.2.0-alpha.29",
    "@storybook/addon-essentials": "6.2.0-alpha.29",
    "@storybook/vue": "^6.2.0-alpha.29",
    "@types/node": "^10.17.15",
    "@typescript-eslint/eslint-plugin": "^3.3.0",
    "@typescript-eslint/parser": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.4",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-vue": "^6.1.2",
    "vue-cli-plugin-storybook": "~2.0.0"
  },
  "browserslist": [
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 Android versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions"
  ],
  "engines": {
    "node": ">= 10.18.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

I have no idea what may be failing. If you need more information I will provide it immediately, Thank you very much.

[phated]

@Sebastian1830 Hmm, you don't seem to have "vue": "^3.0.0" in dependencies list, nor @storybook/vue3 in your devDependencies. I see you have @storybook/vue which is only for Vue 2.

[Sebastian1830]

since yesterday i was looking for the best way to install the storybook with quasar dev. After several attempts I managed to install the storybook with the CLI of vue vue add storybook.

Before I was trying this way:
1.- npx sb init
2.- npx sb upgrade --prerelease
3.- change @storybook/vue to @storybook/vue3
4.- run npm run storybook
5.- It showed me an error that needed the package "vue": "^ 3.0.0" install this package.
6.- Then it showed me another error that needed the vue-template-compiler package but I knew that this library only works with vue2
7.- Install the following package @vue/compiler-sfc instead of vue-template-compiler and the error # 6 persisted
8.- then finally I decided to install the storybook with the CLI of vue vue add storybook

Everything was going fine until I got this error that I posted. Sorry for my English.

[phated]

Instead of using those steps, maybe start again and do this:

1. Add `"vue": "^3.0.0" to your package.json
2. Run npx sb@next init (this will detect vue 3 and configure your project correctly)

Initializing with the old CLI and trying to upgrade to vue3 doesn't work because it configures your project incorrectly for vue 2.

[Sebastian1830]

Thank you very much for the help. It worked correctly.

[phated]

Hooray! I'll close this out. I'm glad we got it working 😄

[alvarosabu]

I still have an issue tho using quasar v2 with storybook quasarframework/quasar#8607

[hosseinghs]

2. npx sb@next init

hi, i was having so much trouble installing storybook to my quasar app, at first when I was trying to install SB i was shocked by seeing react and react-dom packages added to my package.json.( I was using vue docs I'm sure of it ).
I used the command that u said and I don't see unrelated packages no more. I have 2 questions:

1. where did u found the command?
2. when I run the SB i get this error: Failed to build the preview TypeError: createFilter is not a function
   any idea how can I fix that?
   this is my package.json:
   { "name": "resam-frontend", "version": "0.0.1", "private": true, "scripts": { "lint": "eslint --ext .js,.ts,.vue ./", "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore", "test": "echo \"No test specified\" && exit 0", "dev": "quasar dev", "build": "quasar build", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" }, "dependencies": { "@quasar/extras": "^1.16.4", "axios": "^1.2.1", "pinia": "^2.0.11", "postcss-rtlcss": "^5.1.0", "quasar": "^2.8.0", "vue": "^3.4.15", "vue-router": "^4.0.12" }, "devDependencies": { "@quasar/app-vite": "^1.4.3", "@storybook/addon-essentials": "8.0.0-alpha.12", "@storybook/addon-interactions": "8.0.0-alpha.12", "@storybook/addon-links": "8.0.0-alpha.12", "@storybook/blocks": "8.0.0-alpha.12", "@storybook/test": "8.0.0-alpha.12", "@storybook/vue3": "8.0.0-alpha.12", "@storybook/vue3-vite": "8.0.0-alpha.12", "@types/node": "^12.20.21", "@typescript-eslint/eslint-plugin": "^5.10.0", "@typescript-eslint/parser": "^5.10.0", "autoprefixer": "^10.4.2", "eslint": "^8.11.0", "eslint-config-prettier": "^8.1.0", "eslint-plugin-storybook": "^0.6.15", "eslint-plugin-vue": "^9.0.0", "prettier": "^2.5.1", "storybook": "8.0.0-alpha.12", "typescript": "^4.5.4" }, "engines": { "node": "^20 || ^18 || ^16", "npm": ">= 6.13.4", "yarn": ">= 1.21.1" } }