在完成以下步骤后

  • 按照docs中的说明安装干净的Vue3/Vite应用程序(Vue应用程序运行正常)
  • 按照docs中的说明安装Storybook
  • 运行故事书(npm run storybook)

我遇到以下错误:

importers[path] is not a function


TypeError: importers[path] is not a function
    at StoryStore2.importFn (http://localhost:6006/virtual:/@storybook/builder-vite/storybook-stories.js:6:31)
    at StoryStore2.loadCSFFileByStoryId (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2297:19)
    at StoryStore2._callee2$ (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2355:29)
    at tryCatch (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-IKIHLHDP.js?v=58e9ae5a:46:44)
    at Generator.invoke (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-IKIHLHDP.js?v=58e9ae5a:213:26)
    at Generator.next (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-IKIHLHDP.js?v=58e9ae5a:87:25)
    at asyncGeneratorStep2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2140:24)
    at _next (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2158:9)

这里可能出了什么问题,如何才能解决这个问题?

enter image description here

推荐答案

显然,以下步骤将创建一个干净的Vue 3/Vite/Storybook安装:

  • npm create vite@latest
    • Project name:<project name>.
    • Select a framework:查看
    • Select a variant:Typescript
  • CD <project name>
  • NPM安装
  • Npx Storybook init--Builder@storybook/Builder-vite--type vue3
  • NPM安装 @storybook/builder-vite@0.3 --save-dev (mdx stories are not working with version 0.4)
  • NPM运行故事书

它创建以下Package.json:

{
  "name": "Test project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@storybook/addon-actions": "^6.5.16",
    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-interactions": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/builder-vite": "^0.3.0",
    "@storybook/testing-library": "^0.0.13",
    "@storybook/vue3": "^6.5.16",
    "@vitejs/plugin-vue": "^4.0.0",
    "babel-loader": "^8.3.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vue-loader": "^16.8.3",
    "vue-tsc": "^1.0.24"
  }
}

Vue.js相关问答推荐

无法解析组件:google—pay—button

如何将 cogo toast PRIVE集成到nuxt3中?

我如何使用vuejs访问彼此嵌套的json对象

在 Vue 中删除自定义组件代码重复的方法?

使用 nuxt.js 组件自动导入对性能不利吗?

指定一个 vue-cli vue.config.js 位置

为什么组件在 v-if 下没有被销毁

[Vue 警告]:渲染函数中的错误:TypeError:无法读取属性 'first_name' of null

使用 vue.js 的 axios 预检失败错误 301

PhpStorm 中Expected预期表达式

Vue:从 Vue 实例更新组件数据

错误:[vuex] 期望字符串作为类型,但发现未定义

SassError:媒体查询表达式必须以(开头

Vue devServer 代理没有帮助,我仍然收到 CORS 错误

无法访问数据对象的嵌套属性

从 vue.js 中的 store 获得的计算(computed)属性的设置器

模块构建失败:错误:没有给出解析器和文件路径,无法在 nuxtjs 中推断出解析器

如何使用vue.js/nuxt.js获取一个目录下的所有图片文件

无法访问函数内的数据属性

在子元素 vueJS.2 之间切换active类