histoire-dev / histoire-dev/histoire
ReferenceError: Vue is not defined
- 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
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