search

vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
12.85k stars 2.08k forks source link

Conflict with vue 2 #1490

Closed Jinjiang closed 2 years ago

Jinjiang commented 2 years ago

Describe the bug

There would be an runtime error when vue@2 and vitepress are installed in the same repo.

Reproduction

https://github.com/Jinjiang/vue-a11y-utils/tree/reproduce-vitepress-bug

pnpm install and then pnpm run docs

Error log:

1:51:57 PM [vite] Internal server error: Cannot set properties of undefined (setting 'id')
  Plugin: vite:vue
  File: /Users/jinjiang/Developer/vue-a11y-utils/node_modules/.pnpm/vitepress@1.0.0-alpha.20/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageSection.vue
      at createDescriptor (file:///Users/jinjiang/Developer/vue-a11y-utils/node_modules/.pnpm/@vitejs+plugin-vue@3.1.2_vite@3.1.8+vue@3.2.41/node_modules/@vitejs/plugin-vue/dist/index.mjs:67:17)
      at transformMain (file:///Users/jinjiang/Developer/vue-a11y-utils/node_modules/.pnpm/@vitejs+plugin-vue@3.1.2_vite@3.1.8+vue@3.2.41/node_modules/@vitejs/plugin-vue/dist/index.mjs:2158:34)
      at TransformContext.transform (file:///Users/jinjiang/Developer/vue-a11y-utils/node_modules/.pnpm/@vitejs+plugin-vue@3.1.2_vite@3.1.8+vue@3.2.41/node_modules/@vitejs/plugin-vue/dist/index.mjs:2646:16)
      at Object.transform (file:///Users/jinjiang/Developer/vue-a11y-utils/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:41111:44)
      at async loadAndTransform (file:///Users/jinjiang/Developer/vue-a11y-utils/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:37373:29)

Expected behavior

A page with the content "hello" could be opened properly in the browser.

System Info

System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M1
    Memory: 68.98 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.asdf/installs/nodejs/16.15.0/bin/node
    Yarn: 1.22.19 - ~/.asdf/shims/yarn
    npm: 8.5.5 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 106.0.5249.119
    Safari: 16.1
  npmPackages:
    vitepress: 1.0.0-alpha.20 => 1.0.0-alpha.20

Additional context

No response

Validations

brc-dd commented 2 years ago

VitePress uses the user installed Vue version if possible. But since you've installed vue@2, there will be errors as VitePress is not compatible with it. You can workaround this by using workspaces and installing vitepress and vue3 in docs only. So, rest of your project will be using vue@2, but the docs will use vue@3. Here is an example: https://github.com/brc-dd/vitepress-monorepo-isolation

Jinjiang commented 2 years ago

VitePress uses the user installed Vue version if possible.

I see. Thanks for the explanation.

May I know why we do it in this way? It seems like a non-purpose project config could break it down. BTW, my scenario is to use VitePress in a Vue 2 lib for its docs out-of-box.

brc-dd commented 2 years ago

May I know why we do it in this way?

So that users can lock Vue version (like to prevent Vue's breaking changes / regressions from affecting their app). It's there since 0.x https://github.com/vuejs/vitepress/commit/9b3243b75752209943af5b247f5d38e641d4ff6d

Jinjiang commented 2 years ago

Totally understood. Anyway, would still be great if there could be an option to isolate the effect from outside easily in that case. 😅