histoire-dev / histoire-dev/histoire

ReferenceError: Vue is not defined

Open
#478 3 comments 0 reactions 0 assignees View on GitHub
to triage
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

I'm facing a error and all my stories is not showing, but the tailwind stories are fine

```shell
Error while collecting story /Users/leonardocavalcante/projects/XXXX-nuxt/components/AutoImport.story.vue:
ReferenceError: Vue is not defined
at Object. (/Users/leonardocavalcante/projects/XXXX-nuxt/node_modules/.pnpm/vue-multiselect@3.0.0-beta.1/node_modules/vue-multiselect/dist/vue-multiselect.js:1350:7)
at Module._compile (node:internal/modules/cjs/loader:1254:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
Error while collecting story /Users/leonardocavalcante/projects/XXXX-nuxt/components/Button/Button.story.vue:
ReferenceError: Vue is not defined
at Object. (/Users/leonardocavalcante/projects/XXXX-nuxt/node_modules/.pnpm/vue-multiselect@3.0.0-beta.1/node_modules/vue-multiselect/dist/vue-multiselect.js:1350:7)
at Module._compile (node:internal/modules/cjs/loader:1254:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
```

### Reproduction

vite.config.ts:
```ts
import { defineConfig } from 'vite'
import postcssNesting from 'postcss-nesting'
import atImport from 'postcss-import'

export default defineConfig({
optimizeDeps: {
// include: ['@fawmi/vue-google-maps', 'fast-deep-equal'],
},
css: {
postcss: {
plugins: [postcssNesting, atImport],
},
},
})
```

histoire.config.ts
```ts
import { defineConfig } from 'histoire'
import { HstVue } from '@histoire/plugin-vue'
import { HstNuxt } from '@histoire/plugin-nuxt'

export default defineConfig({
plugins: [HstVue(), HstNuxt()],
storyIgnored: [
'**/node_modules/**',
'**/dist/**',
'**/vue-multiselect@3.0.0-beta.1/**',
],
})
```

### System Info

```shell
System:
OS: macOS 13.2.1
CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
Memory: 2.33 GB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
Watchman: 2023.02.20.00 - /usr/local/bin/watchman
Browsers:
Chrome: 110.0.5481.177
Safari: 16.3
npmPackages:
@histoire/plugin-nuxt: ^0.15.8 => 0.15.8
@histoire/plugin-vue: ^0.15.8 => 0.15.8
histoire: ^0.15.8 => 0.15.8
```

package.json
```json
{
"version": "0.0.1",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"lint": "eslint --ext \".ts,.js,.vue\" --ignore-path .eslintignore .",
"lintfix": "eslint --fix --ext \".ts,.js,.vue\" --ignore-path .eslintignore .",
"prepare": "husky install",
"preinstall": "npx only-allow pnpm",
"commit": "git-cz",
"story:dev": "histoire dev",
"story:build": "histoire build",
"story:preview": "histoire preview"
},
"dependencies": {
"@formkit/icons": "1.0.0-beta.15",
"@formkit/nuxt": "1.0.0-beta.15",
"@formkit/themes": "1.0.0-beta.15",
"@formkit/vue": "1.0.0-beta.15",
"@morev/vue-transitions": "^2.3.6",
"@nuxtjs/html-validator": "^1.2.3",
"@vue/runtime-core": "^3.2.47",
"angger-sticky-sidebar-v2": "^1.0.0",
"classnames": "^2.3.2",
"crypto-js": "^4.1.1",
"daisyui": "^2.51.3",
"dayjs": "^1.11.7",
"echarts": "^5.4.1",
"idb-keyval": "^6.2.0",
"imask": "^6.4.3",
"next-auth": "^4.20.1",
"nuxt-highcharts": "^3.0.9",
"unstorage": "^1.2.0",
"vue-echarts": "^6.5.4",
"vue-multiselect": "^3.0.0-beta.1"
},
"devDependencies": {
"@commitlint/cli": "^17.4.4",
"@commitlint/config-conventional": "^17.4.4",
"@histoire/plugin-nuxt": "^0.15.8",
"@histoire/plugin-vue": "^0.15.8",
"@nuxt/test-utils-edge": "^3.3.0-27964441.3681bddfd",
"@nuxtjs/color-mode": "^3.2.0",
"@nuxtjs/eslint-config": "^12.0.0",
"@nuxtjs/eslint-config-typescript": "^12.0.0",
"@nuxtjs/i18n": "8.0.0-beta.10",
"@nuxtjs/tailwindcss": "^6.4.1",
"@pinia/nuxt": "^0.4.7",
"@sidebase/nuxt-auth": "^0.4.2",
"@tailwindcss/forms": "^0.5.3",
"@types/crypto-js": "^4.1.1",
"@vite-pwa/nuxt": "^0.0.6",
"@vueuse/core": "^9.13.0",
"@vueuse/nuxt": "^9.13.0",
"autoprefixer": "^10.4.13",
"commitizen": "^4.3.0",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^8.35.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-nuxt": "^4.0.0",
"eslint-plugin-prettier": "^4.2.1",
"histoire": "^0.15.8",
"husky": "^8.0.3",
"js-yaml": "^4.1.0",
"lint-staged": "^13.1.2",
"nuxt": "^3.2.3",
"nuxt-svgo": "^1.1.0",
"nuxt-vitest": "^0.6.6",
"pinia": "^2.0.32",
"postcss": "^8.4.21",
"postcss-hexrgba": "^2.1.0",
"postcss-html": "^1.5.0",
"postcss-import": "^15.1.0",
"postcss-loader": "^7.0.2",
"postcss-nested": "^6.0.1",
"postcss-nesting": "^11.2.1",
"postcss-url": "^10.1.3",
"prettier": "^2.8.4",
"prettier-plugin-tailwindcss": "^0.2.4",
"typescript": "^4.9.5",
"vitest": "^0.29.2"
},
"lint-staged": {
"**/*.{js,ts,vue,html}": [
"pnpm lintfix"
]
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"husky": {
"hooks": {
"prepare-commit-msg": "exec < /dev/tty && npx cz --hook || true"
}
}
}

```

### Used Package Manager

pnpm

### Validations

- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

Contributor guide

Open the contributing guide

Research direction

Start by running `pnpm story:dev` with the reproduced `vite.config.ts` and `histoire.config.ts`, then inspect how the Histoire Vue/Nuxt plugins collect `AutoImport.story.vue` and `Button.story.vue`. Trace the `vue-multiselect` dependency that raises `ReferenceError: Vue is not defined`; done means the affected stories are collected without that error.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript, vite
Domain
devtools, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.