search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.55k stars 9.3k forks source link

init fails for quasar vite template #19151

Closed boid-com closed 1 year ago

boid-com commented 2 years ago

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

NominalTrajectory commented 2 years ago

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

IanVS commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 1 year ago

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

sktlmarat commented 1 year ago

@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!