init fails for quasar vite template #19151

boid-com · 2022-09-09T03:16:22Z

Describe the bug
With a basic quasar (vue3, typescript, vite) project. Running npx storybook init installs successfully but yarn storybook fails with the error TypeError: Cannot read properties of undefined (reading 'get')

To Reproduce

yarn create quasar

in the options, choose typescript and vite

npx storybook init
yarn build
yarn storybook

System

Environment Info:

  System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Safari: 15.6.1
  npmPackages:
    @storybook/addon-actions: ^6.5.10 => 6.5.10 
    @storybook/addon-essentials: ^6.5.10 => 6.5.10 
    @storybook/addon-interactions: ^6.5.10 => 6.5.10 
    @storybook/addon-links: ^6.5.10 => 6.5.10 
    @storybook/builder-webpack4: ^6.5.10 => 6.5.10 
    @storybook/manager-webpack4: ^6.5.10 => 6.5.10 
    @storybook/testing-library: ^0.0.13 => 0.0.13 
    @storybook/vue3: ^6.5.10 => 6.5.10

Additional context
Also, I noticed that build-webpack is being installed when quasar is using vite, seems incorrect.
official docs for quasar here:
quasar.dev

The text was updated successfully, but these errors were encountered:

NominalTrajectory · 2022-09-13T08:29:45Z

@boid-com I'm having the same issue. Have you been able to resolve it?

IanVS · 2022-09-22T01:12:48Z

@NominalTrajectory @boid-com do you have a vite.config.js file in your quasar project? If not, you'll need to pass --builder=vite explicitly to npx storybook init. We use the presence of that config file to determine whether or not to use the vite builder.

boid-com · 2022-10-05T00:24:01Z

ok I tried again with a fresh quasar project and --builder=vite and I'm getting this error, I noticed viteReact from plugin-react so it must not detect that this is a vue project.

I see this error when running yarn playground and yarn build

ERR! TypeError: vite.createFilter is not a function
ERR!     at viteReact (/Users/boidcom/Dev/boid/boid-web/node_modules/@vitejs/plugin-react/dist/index.cjs:202:21)
ERR!     at pluginConfig (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/builder-vite/dist/vite-config.js:82:36)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async commonConfig (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/builder-vite/dist/vite-config.js:66:18)
ERR!     at async createViteServer (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/builder-vite/dist/vite-server.js:10:24)
ERR!     at async Object.start (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/builder-vite/dist/index.js:53:20)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!     at async buildDevStandalone (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at async buildDev (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)
ERR!  TypeError: vite.createFilter is not a function
ERR!     at viteReact (/Users/boidcom/Dev/boid/boid-web/node_modules/@vitejs/plugin-react/dist/index.cjs:202:21)
ERR!     at pluginConfig (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/builder-vite/dist/vite-config.js:82:36)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async commonConfig (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/builder-vite/dist/vite-config.js:66:18)
ERR!     at async createViteServer (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/builder-vite/dist/vite-server.js:10:24)
ERR!     at async Object.start (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/builder-vite/dist/index.js:53:20)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!     at async buildDevStandalone (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at async buildDev (/Users/boidcom/Dev/boid/boid-web/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)

IanVS · 2022-10-05T11:47:52Z

@boid-com that error happens when there is a mismatch between the version of the vite-builder and vite itself. If you're using a version of vite less than 3.0, you'll need to either upgrade, or downgrade @storybook/builder-vite to 0.1.x.

Nikitonu4 · 2022-10-07T21:37:39Z

@boid-com that error happens when there is a mismatch between the version of the vite-builder and vite itself. If you're using a version of vite less than 3.0, you'll need to either upgrade, or downgrade @storybook/builder-vite to 0.1.x.

same problem, the solution did't help, the vite version is 3.0.0, @storybook/builder-vite is 0.2.3

// package.json
"dependencies": {
    "@quasar/extras": "^1.0.0",
    "axios": "^0.27.2",
    "pinia": "^2.0.22",
    "quasar": "^2.8.4",
    "vue": "^3.2.40",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@intlify/vite-plugin-vue-i18n": "^6.0.3",
    "@quasar/app-vite": "^1.0.0",
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/builder-vite": "^0.2.3",
    "@storybook/testing-library": "^0.0.13",
    "@storybook/vue3": "^6.5.10",
    "@types/node": "^12.20.21",
    "@typescript-eslint/eslint-plugin": "^5.10.0",
    "@typescript-eslint/parser": "^5.10.0",
    "@vitejs/plugin-vue": "^3.1.2",
    "autoprefixer": "^10.4.2",
    "babel-loader": "^8.2.5",
    "eslint": "8.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-storybook": "^0.6.4",
    "eslint-plugin-vue": "^9.0.0",
    "node-sass": "^7.0.3",
    "prettier": "^2.7.1",
    "sass-loader": "^10.3.1",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "vue-loader": "^16.8.3"
  },

IanVS · 2022-10-08T02:04:19Z

@Nikitonu4 are you sure you're using vite 3? I just tried bootstrapping quasar myself, and I see that it installed vite 2.9.15. I'm working on getting it running, and will post a solution if I find one.

IanVS · 2022-10-08T02:22:45Z

I ran yarn add --dev vite@3, and adjusted my .storybook/main.js like this, and storybook loads the example stories. I'm not familiar enough with quasar to know whether it's 100% working, though:

const vue = require("@vitejs/plugin-vue");
const { quasar, transformAssetUrls } = require("@quasar/vite-plugin");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/vue3",
  core: {
    builder: "@storybook/builder-vite",
  },
  features: {
    storyStoreV7: true,
  },
  async viteFinal(config) {
    const plugins = config.plugins
      // Remove the existing vue plugin that was added by storybook
      .filter((p) => {
        return p.name !== "vite:vue";
      })
      // Add configured vue plugin, and quasar plugin
      .concat([
        vue({ template: { transformAssetUrls } }), 
        quasar()
      ]);

    return {
      ...config,
      plugins,
    };
  },
};

Nikitonu4 · 2022-10-08T09:38:33Z

@Nikitonu4 are you sure you're using vite 3? I just tried bootstrapping quasar myself, and I see that it installed vite 2.9.15. I'm working on getting it running, and will post a solution if I find one.

indeed, after installing vite@3 dependency it worked, thanks!

Nikitonu4 · 2022-10-11T20:36:20Z

I ran yarn add --dev vite@3, and adjusted my .storybook/main.js like this, and storybook loads the example stories. I'm not familiar enough with quasar to know whether it's 100% working, though:

const vue = require("@vitejs/plugin-vue");
const { quasar, transformAssetUrls } = require("@quasar/vite-plugin");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/vue3",
  core: {
    builder: "@storybook/builder-vite",
  },
  features: {
    storyStoreV7: true,
  },
  async viteFinal(config) {
    const plugins = config.plugins
      // Remove the existing vue plugin that was added by storybook
      .filter((p) => {
        return p.name !== "vite:vue";
      })
      // Add configured vue plugin, and quasar plugin
      .concat([
        vue({ template: { transformAssetUrls } }), 
        quasar()
      ]);

    return {
      ...config,
      plugins,
    };
  },
};

however, with vite 2.9.13 version of @storybook/builder-vite 0.1.39 doesn't work. It turns out that either the quasar or storybook assembly works, can you have a solution how to get @storybook/builder-vite with the 2nd version of vite?

 "devDependencies": {
    "@babel/core": "^7.19.3",
    "@intlify/vite-plugin-vue-i18n": "^6.0.3",
    "@quasar/app-vite": "^1.1.2",
    "@storybook/addon-actions": "^6.5.12",
    "@storybook/addon-essentials": "^6.5.12",
    "@storybook/addon-interactions": "^6.5.12",
    "@storybook/addon-links": "^6.5.12",
    "@storybook/addons": "^6.5.12",
    "@storybook/builder-vite": "0.1.39",
    "@storybook/testing-library": "^0.0.13",
    "@storybook/vue3": "^6.5.10",
    "@types/node": "^12.20.21",
    "@typescript-eslint/eslint-plugin": "^5.39.0",
    "@typescript-eslint/parser": "^5.39.0",
    "@vitejs/plugin-vue": "^3.1.2",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "autoprefixer": "^10.4.2",
    "babel-loader": "^8.2.5",
    "eslint": "^8.22.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-storybook": "^0.6.4",
    "eslint-plugin-vue": "^9.6.0",
    "node-sass": "^7.0.3",
    "prettier": "^2.7.1",
    "sass-loader": "^10.3.1",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "vite": "^2.9.13",
    "vue-loader": "^16.8.3"
  }

info @storybook/vue3 v6.5.12
info 
info => Loading presets
ERR! TypeError: vite.createFilter is not a function
ERR!     at vuePlugin (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@vitejs/plugin-vue/dist/index.cjs:2553:23)
ERR!     at pluginConfig (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/builder-vite/vite-config.ts:88:20)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at commonConfig (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/builder-vite/vite-config.ts:51:14)
ERR!     at createViteServer (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/builder-vite/vite-server.ts:12:22)
ERR!     at Object.start (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/builder-vite/index.ts:48:18)
ERR!     at async Promise.all (index 0)
ERR!     at storybookDevServer (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!     at buildDevStandalone (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at buildDev (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)
ERR!  TypeError: vite.createFilter is not a function
ERR!     at vuePlugin (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@vitejs/plugin-vue/dist/index.cjs:2553:23)
ERR!     at pluginConfig (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/builder-vite/vite-config.ts:88:20)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at commonConfig (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/builder-vite/vite-config.ts:51:14)
ERR!     at createViteServer (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/builder-vite/vite-server.ts:12:22)
ERR!     at Object.start (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/builder-vite/index.ts:48:18)
ERR!     at async Promise.all (index 0)
ERR!     at storybookDevServer (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!     at buildDevStandalone (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at buildDev (/home/user/Projects/Friendroom/friendroom.front/app/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)

IanVS · 2022-10-11T20:55:01Z

@Nikitonu4 I was able to get Vite 2 working correctly as long as I installed @vitejs/plugin-vue@2, which is the version that is compatible with Vite 2. Can you give that a try and let us know if it works?

IanVS · 2022-12-28T20:26:39Z

Closing this out for now, but let me know if you're still having trouble.

sktlmarat · 2023-01-18T20:08:41Z

@boid-com that error happens when there is a mismatch between the version of the vite-builder and vite itself. If you're using a version of vite less than 3.0, you'll need to either upgrade, or downgrade @storybook/builder-vite to 0.1.x.

This one worked for me, downgraded to 0.1.x. Thanks!

boid-com added bug needs triage labels Sep 9, 2022

IanVS added the builder-vite label Sep 22, 2022

IanVS closed this as not planned Won't fix, can't repro, duplicate, stale Dec 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

init fails for quasar vite template #19151

init fails for quasar vite template #19151

boid-com commented Sep 9, 2022

NominalTrajectory commented Sep 13, 2022

IanVS commented Sep 22, 2022

boid-com commented Oct 5, 2022 •

edited

IanVS commented Oct 5, 2022

Nikitonu4 commented Oct 7, 2022

IanVS commented Oct 8, 2022 •

edited

IanVS commented Oct 8, 2022 •

edited

Nikitonu4 commented Oct 8, 2022

Nikitonu4 commented Oct 11, 2022

IanVS commented Oct 11, 2022 •

edited

IanVS commented Dec 28, 2022

sktlmarat commented Jan 18, 2023

init fails for quasar vite template #19151

init fails for quasar vite template #19151

Comments

boid-com commented Sep 9, 2022

NominalTrajectory commented Sep 13, 2022

IanVS commented Sep 22, 2022

boid-com commented Oct 5, 2022 • edited

IanVS commented Oct 5, 2022

Nikitonu4 commented Oct 7, 2022

IanVS commented Oct 8, 2022 • edited

IanVS commented Oct 8, 2022 • edited

Nikitonu4 commented Oct 8, 2022

Nikitonu4 commented Oct 11, 2022

IanVS commented Oct 11, 2022 • edited

IanVS commented Dec 28, 2022

sktlmarat commented Jan 18, 2023

boid-com commented Oct 5, 2022 •

edited

IanVS commented Oct 8, 2022 •

edited

IanVS commented Oct 8, 2022 •

edited

IanVS commented Oct 11, 2022 •

edited