search

NickMcBurney / storybook-vue3-router

A Storybook decorator that allows you to use Vue 3 / vue-router@4 routing-aware components.
MIT License
29 stars 8 forks source link

Storybook V7 Support #38

Closed shinodkharim closed 1 year ago

shinodkharim commented 1 year ago

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

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

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

https://github.com/storybookjs/storybook/issues/19200

NickMcBurney commented 1 year ago

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

Hi @NickMcBurney , please see my comments over here... https://github.com/NickMcBurney/storybook-vue3-router/pull/39

blowsie commented 1 year ago

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

NickMcBurney commented 1 year ago

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

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

NickMcBurney commented 1 year ago

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

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

storybook-vue3-router@3.0.0-next.2

blowsie commented 1 year ago

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

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

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

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.