`defineAsyncComponents` break building
yzx9 opened this issue · comments
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
- Create a new project.
- Add a
Page.vue
file with the following code:import { useData } from 'vitepress'; const data = useData();
- Import
Page.vue
inLayout.vue
withimport Page from "./Page.vue"
and successfully build the project. - 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.
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.