core: [Bug report] Error "Failed to resolve component: Layout" when extending default theme
Bug report
Description
When extending the default theme. My end goal is to add custom content to navbar-before.
Steps to reproduce
First I tried replacing layout slots per https://v2.vuepress.vuejs.org/reference/default-theme/extending.html#layout-slots:
docs/.vuepress/theme/index.js
const { path } = require('@vuepress/utils')
module.exports = {
name: 'vuepress-theme-local',
extends: '@vuepress/theme-default',
layouts: {
Layout: path.resolve(__dirname, 'layouts/Layout.vue'),
},
}
docs/.vuepress/theme/layouts/Layout.vue
<script setup>
import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
</script>
<template>
<ParentLayout>
<template #page-bottom>
<div class="my-footer">This is my custom page footer</div>
</template>
</ParentLayout>
</template>
<style lang="css">
.my-footer {
text-align: center;
}
</style>
docs/.vuepress/config.js
const { path } = require('@vuepress/utils')
module.exports = {
// ...,
theme: path.resolve(__dirname, './theme'),
}
Started and stopped the dev server, and in the browser I got
runtime-core.esm-bundler.js:6620
[Vue warn]: Failed to resolve component: Layout
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <Vuepress onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <VuepressApp>
Reading on I saw the @alias approach, which is a better match for my needs.
I deleted docs/.vuepress/theme/layouts/Layout.vue, updated docs/.vuepress/config.js to
const { path } = require('@vuepress/utils')
module.exports = {
alias: {
'@theme/Navbar.vue': path.resolve(__dirname, './components/Navbar.vue'),
},
}
and copied https://github.com/vuepress/vuepress-next/blob/v2.0.0-beta.36/packages/%40vuepress/theme-default/src/client/components/Navbar.vue to docs/.vuepress/theme/components/Navbar.vue.
Restarted the server. Reloaded the browser tab. Same error.
Getting a Layout-related error when I was changing Navbar not Layout made me think it was a cache problem.
Deleted docs/.vuepress/.cache, cleared browser tab storage, restarted the server, reloaded the tab. Same error.
Expected behavior
Can extend the default theme per the docs.
Screenshots
Environment info
- Browser: 99.0.4844.51
- Output of
vuepress info:
% yarn vuepress info
yarn run v1.22.17
$ /path/to/./node_modules/.bin/vuepress info
System:
OS: macOS 12.2.1
CPU: (8) x64 Apple M1
Memory: 31.67 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.13.1 - /var/folders/s8/(a hash)/T/yarn--1647558595535-0.32360507657577275/node
Yarn: 1.22.17 - /var/folders/s8/(a hash)/T/yarn--1647558595535-0.32360507657577275/yarn
npm: 8.1.2 - ~/.asdf/installs/nodejs/16.13.1/bin/npm
Utilities:
Git: 2.34.1 - /opt/homebrew/bin/git
Browsers:
Chrome: 99.0.4844.74
Edge: 99.0.1150.46
Firefox: 96.0.3
Safari: 15.3
npmPackages:
@vuepress/bundler-vite: 2.0.0-beta.36
@vuepress/bundler-webpack: Not Found
@vuepress/cli: 2.0.0-beta.36
@vuepress/client: 2.0.0-beta.35
@vuepress/core: 2.0.0-beta.36
@vuepress/markdown: 2.0.0-beta.36
@vuepress/plugin-active-header-links: 2.0.0-beta.36
@vuepress/plugin-back-to-top: 2.0.0-beta.36
@vuepress/plugin-container: 2.0.0-beta.36
@vuepress/plugin-docsearch: Not Found
@vuepress/plugin-external-link-icon: 2.0.0-beta.36
@vuepress/plugin-git: 2.0.0-beta.36
@vuepress/plugin-google-analytics: Not Found
@vuepress/plugin-medium-zoom: 2.0.0-beta.36
@vuepress/plugin-nprogress: 2.0.0-beta.36
@vuepress/plugin-palette: 2.0.0-beta.36
@vuepress/plugin-prismjs: 2.0.0-beta.36
@vuepress/plugin-pwa: Not Found
@vuepress/plugin-pwa-popup: Not Found
@vuepress/plugin-register-components: Not Found
@vuepress/plugin-search: Not Found
@vuepress/plugin-shiki: ^2.0.0-beta.36 => 2.0.0-beta.36
@vuepress/plugin-theme-data: 2.0.0-beta.36
@vuepress/plugin-toc: Not Found
@vuepress/shared: 2.0.0-beta.35
@vuepress/theme-default: 2.0.0-beta.36
@vuepress/utils: 2.0.0-beta.35
vue: 3.2.31
vue-loader: Not Found
vue-router: 4.0.14
vuepress: ^2.0.0-beta.36 => 2.0.0-beta.36
vuepress-vite: 2.0.0-beta.36
vuepress-webpack: Not Found
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 16 (3 by maintainers)
Could you provide a minial reproduction repo?