Storybook V7 Support

[shinodkharim]

I recently tried to upgrade to storybook7 and Vite but the package is giving this error- _No matching export in "node_modules/@storybook/vue3/dist/index.mjs" from import "app".

Below is my package.json

{
  "name": "company name here",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "--- ▶️ Application Tools ---": "",
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "--- 🎨 Formatting ---": "",
    "format": "prettier .  --write",
    "--- 🧪 Tests ---": "",
    "test": "vue-cli-service test:unit --coverage --silent",
    "test:debug": "vue-cli-service test:unit --coverage --verbose",
    "test:update": "vue-cli-service test:unit -u --coverage --runInBand --silent",
    "test:watch": "cross-env NODE_ENV=test vue-cli-service test:unit --coverage --runInBand --silent --watch",
    "--- 🖼 Storybook ---": "",
    "storybook": "storybook dev -p 6006",
    "build:storybook": "storybook build",
    "--- 🤓 Developer Tools ---": "",
    "commit": "git-cz",
    "audit": "better-npm-audit audit",
    "husky:prepare": "husky install",
    "vtest": "jest -u --silent --coverage"
  },
  "dependencies": {
    "@apollo/client": "^3.3.11",
    "@babel/plugin-transform-runtime": "^7.19.6",
    "@babel/preset-env": "^7.20.2",
    "@storybook/builder-vite": "^7.0.0-beta.8",
    "@storybook/router": "^6.5.14",
    "@vue/apollo-composable": "^4.0.0-beta.1",
    "@vue/compiler-dom": "^3.2.30",
    "@vue/test-utils": "^2.0.0-rc.18",
    "@vue/vue3-jest": "^29.2.1",
    "@vueuse/core": "^9.6.0",
    "@yaireo/ui-range": "^2.1.15",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^29.3.1",
    "babel-loader": "^9.1.0",
    "better-npm-audit": "^3.7.3",
    "body-scroll-lock": "^4.0.0-beta.0",
    "cross-fetch": "^3.0.6",
    "date-fns": "^2.22.1",
    "detect-touch-device": "^1.1.6",
    "floating-vue": "^2.0.0-beta.17",
    "graphql": "^15.5.0",
    "jest-environment-jsdom": "^29.3.1",
    "register-service-worker": "^1.7.1",
    "speed-measure-webpack-plugin": "^1.5.0",
    "storybook-addon-designs": "^7.0.0-beta.2",
    "template-compiler": "^1.2.1",
    "universal-cookie": "^4.0.4",
    "v-calendar": "^3.0.0-alpha.3",
    "vite-svg-loader": "^3.6.0",
    "vue": "^3.0.0",
    "vue-loader": "^16.1.2",
    "vue-router": "^4.0.0-0",
    "vue3-datepicker": "^0.2.4",
    "vue3-recaptcha-v2": "^1.0.1"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.1.2",
    "@digitalroute/cz-conventional-changelog-for-jira": "^7.4.1",
    "@kouts/vue-modal": "^3.0.2",
    "@rollup/plugin-dynamic-import-vars": "^2.0.1",
    "@rushstack/eslint-patch": "^1.1.4",
    "@ryansonshine/commitizen": "^4.2.8",
    "@storybook/addon-actions": "^7.0.0-beta.8",
    "@storybook/addon-essentials": "^7.0.0-beta.8",
    "@storybook/addon-interactions": "^7.0.0-beta.8",
    "@storybook/addon-links": "^7.0.0-beta.8",
    "@storybook/addons": "^7.0.0-beta.8",
    "@storybook/testing-library": "^0.0.14-next.1",
    "@storybook/theming": "^7.0.0-beta.8",
    "@storybook/vue3": "^7.0.0-beta.8",
    "@storybook/vue3-vite": "^7.0.0-beta.8",
    "@vitejs/plugin-vue": "^3.2.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "babel-preset-vite": "^1.0.4",
    "commitlint-config-jira": "^1.6.4",
    "commitlint-plugin-jira-rules": "^1.6.4",
    "cross-env": "^7.0.3",
    "eslint": "^8.29.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^25.2.4",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-storybook": "^0.6.8",
    "eslint-plugin-vue": "^8.7.1",
    "husky": "^8.0.1",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.3.1",
    "jest-transform-stub": "^2.0.0",
    "minimist": "^1.2.5",
    "mutationobserver-shim": "^0.3.3",
    "node-html-parser": "^3.2.0",
    "postcss": "^8.4.17",
    "postcss-html": "^1.5.0",
    "prettier": "^2.7.1",
    "puppeteer": "^9.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.54.5",
    "sass-loader": "^10.3.1",
    "storybook": "^7.0.0-beta.8",
    "storybook-vue3-router": "^2.3.1",
    "stylelint": "^14.13.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-standard-scss": "^5.0.0",
    "stylelint-config-standard-vue": "^1.0.0",
    "stylelint-order": "^5.0.0",
    "typescript": "~3.9.3",
    "vite": "^3.2.4",
    "vite-plugin-html": "^3.2.0"
  },
  "engineStrict": true,
  "engines": {
    "node": ">= 16.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "config": {
    "commitizen": {
      "path": "./node_modules/@digitalroute/cz-conventional-changelog-for-jira",
      "jiraPrefix": "HE",
      "jiraLocation": "pre-type",
      "jiraAppend": ":",
      "skipBreaking": true
    }
  }
}

[NickMcBurney]

@shinodkharim I've had a look into this and can't replicate the specific issue you have, but there does seem to be issues with Storybook v7 (which is still in beta currently). I'm using storybook@7.0.0-beta.17 and getting different issue which is blocking me from being able to test my package.

Once these are resolved I should be able to test storybook-vue3-router BUT I expect having read the migration guide that the package as it currently stands will not be compatible so ill need to refactor / fix bugs and then I will release a new major version to function with storybook@7.x

Ill be working on this in my storybook-7 branch: https://github.com/NickMcBurney/storybook-vue3-router/tree/storybook-7 and will update here once new version is published.

[blowsie]

Storybook 7 is officially launched tomorrow. I too get this issue, will you be publishing a fix?

X [ERROR] No matching export in "../../node_modules/.pnpm/@storybook+vue3@7.0.0-rc.2_vue@3.2.47/node_modules/@storybook/vue3/dist/index.mjs"
 for import "app"

    ../../node_modules/.pnpm/storybook-vue3-router@2.3.1_hgad37d4lxrjpkyhcxoqulee3i/node_modules/storybook-vue3-router/dist/esm/withMockRout
er.js:7:9:
      7 │ import { app } from "@storybook/vue3";

[blowsie]

storybookjs/storybook#19200

[NickMcBurney]

Thanks for linking that issue @blowsie, I have been trying to get decorator working with storybook 7 but with app export missing I've been unable to. Issue I have is that although I have code which should implement vue-router, the decorator is loaded after component mounts (which throws errors because vue-router not ready).

I'll keep my eye on that issue and hopefully get this working soon.

[blowsie]

Hi @NickMcBurney , please see my comments over here...
#39

[blowsie]

Here is my working version with vue3 and vite
https://github.com/blowsie/storybook-vue-router/tree/sb-7

[NickMcBurney]

@blowsie thanks for your example. I've fixed the issue and migrated to @storybook/vue3-vite.

PR Updated and working: #39

I need to do more testing and publish new version but looking good so far.

[blowsie]

Looks like you beat me to it. Good work. Glad I could help a little

[NickMcBurney]

@shinodkharim you can try installing this version 3.0.0-next.0

npm i -D storybook-vue3-router@3.0.0-next.0

Once Storybook publishes v7 (non-prerelease) I'll publish v3.0.0 (non-prerelease).

[NickMcBurney]

New version published using storybook@7.0.0.rc-8:

storybook-vue3-router@3.0.0-next.2

[blowsie]

Hey @NickMcBurney, we found that using new setup function exported from @storybook/vue3 (sb7) as documented here has an issue, especially for addon authors.

The issue is that the setup function can only be called once... see here
https://github.com/storybookjs/storybook/blob/next/code/renderers/vue3/src/render.ts#L19

This means that an addon author is not able to safely use this setup method, since once it is called in the preview.ts in the users storybook, it will break.
There are a few workarounds here, but ultimately it leads to inconsistency when using addons and setup in the preview file.

I raised this with the storybook in team, here
https://discord.com/channels/486522875931656193/490822288736780288/1090996147620950067

Hopefully we can make a nice workaround to this issue.

[NickMcBurney]

Hey @blowsie, thanks for bringing this to my attention.

Do have any examples of the issues caused/weird behaviour? I've not noticed anything when testing myself - but my tests are very simple and not a great representation of real-life uses.

[matthew-dean]

Note to anyone discovering this issue. With storybook-vue3-router@3.0.0-next.2

This import:

import vueRouter from 'storybook-vue3-router'

...must be changed to:

import { vueRouter } from 'storybook-vue3-router'

Another thing to note is that, currently, version 3.0.0-next.2 seems to annihilate other existing Vue plugins making it unusable if you have a custom preview.js that adds plugins.

[NickMcBurney]

I've publish new 3.0.0 version with storybook 7 support. Also readme is updated explaining issue mentioned by @matthew-dean - I had this noted in PR but it must have been missed.