defineAsyncComponents break building

[yzx9]

Describe the bug

Using useData with asyn components results in an error: Error: vitepress data not properly injected in app.

Reproduction

To replicate the issue, follow these steps in the provided StackBlitz project: https://stackblitz.com/edit/vite-5rgstx

1. Create a new project.
2. Add a Page.vue file with the following code: import { useData } from 'vitepress'; const data = useData();
3. Import Page.vue in Layout.vue with import Page from "./Page.vue" and successfully build the project.
4. Modify the import statement to const Page = defineAsyncComponent(() => import('./Page.vue')); and attempt to rebuild. This results in an error indicating that VitePress data was not properly injected into the application.

The error message is as follows:

❯ npm run docs:build

> docs:build
> vitepress build docs


  vitepress v1.1.3

Export "Content" of module "node_modules/vitepress/dist/client/app/components/Content.js" was reexported through module "node_modules/vitepress/dist/client/index.js" while both modules are dependencies of each other and will end up in different chunks by current Rollup settings. This scenario is not well supported at the moment as it will produce a circular dependency between chunks and will likely lead to broken execution order.
Either change the import in "docs/.vitepress/theme/Page.vue?vue&type=script&setup=true&lang.ts" to point directly to the exporting module or reconfigure "output.manualChunks" to ensure these modules end up in the same chunk.
✓ building client + server bundles...
⠋ rendering pages...Error: vitepress data not properly injected in app
    at Module.useData (/home/projects/vite-5rgstx/docs/.vitepress/.temp/app.js:200:11)
    at setup (/home/projects/vite-5rgstx/docs/.vitepress/.temp/Page.uOp09DLY.js:24:13)
    at _sfc_main.setup (/home/projects/vite-5rgstx/docs/.vitepress/.temp/Page.uOp09DLY.js:34:23)
    at callWithErrorHandling (/home/projects/vite-5rgstx/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:82:19)
    at setupStatefulComponent (/home/projects/vite-5rgstx/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:6048:25)
    at setupComponent (/home/projects/vite-5rgstx/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:6035:36)
    at renderComponentVNode (/home/projects/vite-5rgstx/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:358:15)
    at renderVNode (/home/projects/vite-5rgstx/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:490:14)
    at renderComponentSubTree (/home/projects/vite-5rgstx/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:445:7)
    at eval (/home/projects/vite-5rgstx/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:374:25)
Error: vitepress data not properly injected in app
    at Module.useData (/home/projects/vite-5rgstx/docs/.vitepress/.temp/app.js:200:11)
    at setup (/home/projects/vite-5rgstx/docs/.vitepress/.temp/Page.uOp09DLY.js:24:13)
    at _sfc_main.setup (/home/projects/vite-5rgstx/docs/.vitepress/.temp/Page.uOp09DLY.js:34:23)
    at callWithErrorHandling (/home/projects/vite-5rgstx/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:82:19)
    at setupStatefulComponent (/home/projects/vite-5rgstx/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:6048:25)
    at setupComponent (/home/projects/vite-5rgstx/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:6035:36)
    at renderComponentVNode (/home/projects/vite-5rgstx/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:358:15)
    at renderVNode (/home/projects/vite-5rgstx/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:490:14)
    at renderComponentSubTree (/home/projects/vite-5rgstx/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:445:7)
    at eval (/home/projects/vite-5rgstx/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:374:25)
Error: vitepress data not properly injected in app
    at Module.useData (/home/projects/vite-5rgstx/docs/.vitepress/.temp/app.js:200:11)
    at setup (/home/projects/vite-5rgstx/docs/.vitepress/.temp/Page.uOp09DLY.js:24:13)
    at _sfc_main.setup (/home/projects/vite-5rgstx/docs/.vitepress/.temp/Page.uOp09DLY.js:34:23)
    at callWithErrorHandling (/home/projects/vite-5rgstx/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:82:19)
    at setupStatefulComponent (/home/projects/vite-5rgstx/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:6048:25)
    at setupComponent (/home/projects/vite-5rgstx/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:6035:36)
    at renderComponentVNode (/home/projects/vite-5rgstx/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:358:15)
    at renderVNode (/home/projects/vite-5rgstx/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:490:14)
    at renderComponentSubTree (/home/projects/vite-5rgstx/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:445:7)
    at eval (/home/projects/vite-5rgstx/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:374:25)
✓ rendering pages...
build complete in 1.84s.

Expected behavior

Build success

System Info

System:
    OS: macOS 14.2.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 184.98 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.1 - /opt/homebrew/bin/node
    npm: 10.5.0 - /opt/homebrew/bin/npm
    pnpm: 8.15.4 - /opt/homebrew/bin/pnpm
  Browsers:
    Edge: 123.0.2420.97
    Safari: 17.2.1
  npmPackages:
    vitepress: ^1.1.3 => 1.1.3

Additional context

I have encountered this bug since upgrading to v1.0.0-rc34. I'm unsure whether it's related to commit 9568fea

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Try adding something like this to your .vitepress/config for now: (you can directly use something like patch-package or pnpm patch too instead of monkey patching like this)

import { defineConfig } from 'vitepress'

export default defineConfig({
  vite: {
    plugins: [
      {
        name: 'patch-vitepress-symbol',
        transform(code, id) {
          if (id.includes('vitepress/dist/client/app/data.js')) {
            return code.replace(
              'const dataSymbol = Symbol();',
              'const dataSymbol = "__vitepress_data__";'
            )
          }
        }
      }
    ]
  }
})

It's happening because of chunking logic somewhere, but I'm not sure. Also, it works fine if defineAsyncComponent is used in markdown files 👀

Also, you shouldn't import Content from vitepress. It's a global component. Remove it's import.