How to solve importers[path] is not a function for clean Vue 3/Vite/Storybook installation

Question

After the following steps

• install a clean Vue3/Vite application as outlined in the docs (Vue application runs correctly)
• install Storybook as describes in the docs
• run Storybook (npm run storybook)

I run into the following error:

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)

What could be wrong here and how can this be solved?

Saunder

Answer 1

Apparently the following steps will create a clean Vue 3/Vite/Storybook installation:

• npm create vite@latest
  • Project name: <project name>
  • Select a framework: Vue
  • Select a variant: Typescript
• cd <project name>
• npm install
• npx storybook init --builder @storybook/builder-vite --type vue3
• npm install @storybook/[email protected] --save-dev (mdx stories are not working with version 0.4)
• npm run storybook

It creates the following 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"
  }
}

Saunder