vike
vike copied to clipboard
vikejs
`unplugin-vue-components` + `vite-plugin-md`
Description
The plugin antfu/vite-plugin-md allows me to use markdown files as Vue components. So with VPS I can use them as pages, or import them just like regular Vue components. Combined with the plugin antfu/unplugin-vue-components I can also auto-import both Vue and Markdown as Vue components in both .vue and .md files.
However, I'm noticing a weird issue that I think is related to how VPS builds the project. When I "auto-import" a component in an .md file, everything works fine with the dev server, but during the build I get a [vite-plugin-ssr:autoFullBuild] Invalid value used as weak map key error.
Remove the <Example/> auto imported component, and the error goes away.
Here is a minimal reproduction: https://github.com/AaronBeaudoin/vps-issue-md-auto-import
Error Stack
No response
Just some additional information. In the example above, I have prerender: true enabled, but if you disable it, the build completes, however, you get an error at runtime.
I added a preview server to the minimal example. When removing prerender: true and running a preview server with npm run preview, you'll get this when going to the page:
[Vue warn]: Failed to resolve component: example
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
TypeError: Invalid value used as weak map key
What makes you think it's a problem on vps's side?
The full stack trace is:
error during build:
TypeError: Invalid value used as weak map key
at WeakMap.set (<anonymous>)
at normalizePropsOptions (/home/romuuu/tmp/vps-issue-md-auto-import/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:3179:15)
at createComponentInstance (/home/romuuu/tmp/vps-issue-md-auto-import/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5695:23)
at renderComponentVNode (/home/romuuu/tmp/vps-issue-md-auto-import/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:168:22)
at ssrRenderComponent (/home/romuuu/tmp/vps-issue-md-auto-import/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:605:12)
at file:///home/romuuu/tmp/vps-issue-md-auto-import/dist/server/assets/index.page.6df1b427.js:13:13
at renderComponentSubTree (/home/romuuu/tmp/vps-issue-md-auto-import/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:250:13)
at renderComponentVNode (/home/romuuu/tmp/vps-issue-md-auto-import/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:185:16)
at renderVNode (/home/romuuu/tmp/vps-issue-md-auto-import/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:292:22)
at renderComponentSubTree (/home/romuuu/tmp/vps-issue-md-auto-import/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:256:13)
 ELIFECYCLE  Command failed with exit code 1.
In the minimal reproduction repo above, if I remove VPS from vite.config.js and create these files in the project root:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<div id="page"></div>
<script type="module" src="/index.js"></script>
</body>
</html>
// index.js
import { createApp, h } from "vue";
import Page from "/pages/index.page.md";
const page = createApp({ render: _ => h(Page, {}) });
page.mount("#page");
Everything works flawlessly in both npm run dev and npm run build.
So it seems this issue is only occurring when I build with VPS. I'm not sure how I'd reproduce it otherwise.
It doesn't mean it's "vps's fault" though.
Maybe it's again a clash between Vue SFCs and extractExportNames?
I've finally managed to create a native Vite SSR minimal reproduction of this issue without VPS. Closing.
https://github.com/antfu/vite-plugin-md/issues/112#issuecomment-1353626379