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

image

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)

Most upvoted comments

Could you provide a minial reproduction repo?