vue.jsvitestorybook

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


After the following steps

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?

enter image description here


Solution

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

    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"
      }
    }