vitepress
vitepress copied to clipboard
Theme is made into npm package, if use the theme, Symbol is duplicated in dev.
Describe the bug
Custom theme is a npm package, layout of the theme is following:
// myTheme/src/index.ts
import type { Theme } from "vitepress";
import { configProvider } from "./compositions/configProvider";
import Layout from "./components/layout/index.vue";
const pureTheme: Theme = {
Layout: configProvider(Layout),
};
export default pureTheme;
configProvider's source is following:
// myTheme/src/compositions/configProvider.ts
export const themeConfig: InjectionKey<PureThemeConfig> = Symbol("themeConfig");
export const configProvider = (component: Component) => {
return defineComponent(() => {
const { theme } = useData();
provide(themeConfig, theme.value); // Notice this line
return () => h(component, null, {});
});
};
themeConfig is a Symbol in configProvider.
when i setup vitepress and use custom theme in development "vitepress dev", i get an error.
// doc/.vitepress/theme/index.ts
import pureTheme from "vitepress-pure-theme-zyco";
export default pureTheme;
In .vitepress/cache/deps, myTheme.js has a duplicated themeConfig variable.
but in Layout.vue it uses Header and Header uses themeConfig that is a Symbol:
// Layout.vue
<template>
<Header :nav="Navlist"></Header>
</template>
<script setup lang="ts">
import Header from "../header/index.vue";
</script>
// Header.vue
<script setup lang="ts">
import { inject, computed } from "vue";
import { themeConfig } from "../../compositions/configProvider"; // Notice this line
const theme = inject(themeConfig)!; // Notice this line
In Header.vue, themeConfig exists in myTheme/src/compositions/configProvider.ts,
but in .vitepress/cache/deps/myTheme.js, it also exits a themeConfig.
two themeConfig, two Symbol.
In the result, provide/inject is fail.
In development this is bad, in production, the configProvider module is not extracted, the themeConfig variable is unique.
Reproduction
as mentioned earlier
Expected behavior
In development, some es module that come from node_modules ain't extracted, the variable don't be duplicated.
System Info
System:
OS: Windows 11 10.0.22000
Binaries:
Node: 18.16.0
pnpm: 8.6.0
npmPackages:
vitepress: 1.0.0-rc.31
Additional context
No response
Validations
- [X] Check if you're on the latest VitePress version.
- [X] Follow our Code of Conduct
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
You probably need to add your theme to vite.ssr.noExternal in config. Can you share a repo where I can reproduce this?
I write following code in my theme config,
vite: {
optimizeDeps: {
exclude: ["my-theme-name"],
},
The error is resolved, but is it bug of vite's "optimizeDeps"? The variable of Symbol is extracted and it is duplicated.