Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue2/Nuxt3 - Clicking Links in Storybook Nav Breaks Storybook #17426

Closed
shookcodes opened this issue Feb 4, 2022 · 1 comment
Closed

Vue2/Nuxt3 - Clicking Links in Storybook Nav Breaks Storybook #17426

shookcodes opened this issue Feb 4, 2022 · 1 comment

Comments

@shookcodes
Copy link

shookcodes commented Feb 4, 2022

Describe the bug
After adding Storybook to Vue3/Nuxt2 app, Storybook loads but if I click on a component in the nav (e.g. "Button), Storybook freezes and the page becomes unresponsive. Clicking within the main frame works (before clicking a component).

To Reproduce
Repo used: https://github.com/skyward-digital/nuxt-starter-prismic
Run npx sb init -f
Install dependencies
yarn add -D @storybook/addon-links @storybook/addon-essentials @storybook/addon-postcss @storybook/addon-actions
Run storybook yarn storybook
Click on one of the examples (Button, Header, Page); Storybook becomes unresponsive and page freezes.

Main.js file:

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
};

package.json:

{
  "name": "storm-guard",
  "version": "1.0.0",
  "author": "<skyward-digital>",
  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi generate",
    "start": "nuxi preview",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "yarn lint:js && yarn lint:prettier",
    "lintfix": "prettier --write --list-different . && yarn lint:js --fix",
    "lint:check": "eslint '{components,context,pages,slices,utils}/**/*.js'",
    "format": "prettier --write \"{.slicemachine,.storybook,components,context,customtypes,docs,pages,slices,styles,utils}/**/*.{js,jsx,ts,tsx,css,scss,json,yaml,md}\"",
    "format:check": "prettier --check '{.slicemachine,.storybook,components,context,,customtypes,docs,pages,slices,styles,utils}/**/*.{js,jsx,ts,tsx,css,scss,json,yaml,md}'",
    "sm": "start-slicemachine",
    "storybook": "nuxt storybook",
    "build-storybook": "nuxt storybook build",
    "kill": "kill $(lsof -ti:3000,3003,8888,9999)"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/prismic": "^1.4.0",
    "@prismicio/client": "5.1.1",
    "@prismicio/vue": "^2.1.0",
    "@tailwindcss/line-clamp": "^0.3.0",
    "@tailwindcss/typography": "^0.5.0",
    "algoliasearch": "^4.12.1",
    "core-js": "^3.19.3",
    "instantsearch.css": "^7.4.5",
    "nuxt-edge": "latest",
    "nuxt-sm": "^0.0.9",
    "prismic-dom": "^2.2.7",
    "vue": "^2.6.14",
    "vue-awesome": "^4.5.0",
    "vue-glide-js": "^1.3.14",
    "vue-instantsearch": "^4.3.1",
    "vue-server-renderer": "^2.6.14",
    "vue-slicezone": "^0.1.0",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@nuxt/bridge": "npm:@nuxt/bridge-edge@3.0.0-27375411.b38e394",
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/google-fonts": "^1.3.0",
    "@nuxtjs/storybook": "3.3.1",
    "@nuxtjs/tailwindcss": "^4.2.1",
    "@storybook/vue": "6.1.21",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "postcss": "^8.4.4",
    "prettier": "^2.5.1",
    "slice-machine-ui": "^0.2.0",
    "vue-loader": "15.9.6"
  }
}

System
System:
OS: Windows 10 10.0.22000
CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
Binaries:
Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (97.0.1072.76)
npmPackages:
@storybook/addon-actions: ^6.4.18 => 6.4.18
@storybook/addon-essentials: ^6.4.18 => 6.4.18
@storybook/addon-links: ^6.4.18 => 6.4.18
@storybook/addon-postcss: ^2.0.0 => 2.0.0
@storybook/vue: ^6.4.18 => 6.4.18
npmGlobalPackages:
@storybook/cli: 6.2.9

Additional context
I have tried to get Storybook working on 2 separate repos that use Vue3/Nuxt2 and the same issue occurs on both.

@shookcodes shookcodes changed the title Vue3/Nuxt2 - Clicking Links in Storybook Nav Breaks Storybook Vue2/Nuxt3 - Clicking Links in Storybook Nav Breaks Storybook Feb 4, 2022
@shilman shilman added nuxt and removed needs triage labels Jun 8, 2023
@shilman
Copy link
Member

shilman commented Jun 8, 2023

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

Also, please check out https://storybook.js.org/addons/storybook-addon-nuxt

@shilman shilman closed this as not planned Won't fix, can't repro, duplicate, stale Jun 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants