vuejs / vuepress

📝 Minimalistic Vue-powered static site generator

Home Page:https://vuepress.vuejs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

failed to resolve theme components when using theme inheritance

ulivz opened this issue · comments

  • I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

With Theme Inheritance, all components must use the @theme alias to refer to other components.

  1. Here is a VuePress that import its components via alias - @theme:
import VPIconChevronDown from "@theme/components/icons/VPIconChevronDown.vue";
  1. Extend it:
// .vuepress/theme/index.js
module.exports = {
  extend: "vuepress-theme-vt",
};
  1. Got following errors:
Module not found: Error: Can't resolve '@theme/components/icons/VPIconChevronDown.vue'

I created a minimal reproduction for this issue: https://github.com/ulivz/vuepress-theme-inheritance-resolve-issue-repro

What is expected?

Build successfully

What is actually happening?

Build failed

Other relevant information

  • Output of npx vuepress info in my VuePress project:
Environment Info:

  System:
    OS: macOS 12.3
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 18.17.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 115.0.5790.170
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.4
  npmPackages:
    @vuepress/core: Not Found
    @vuepress/theme-default: Not Found
    vuepress: ^1.5.3 => 1.9.9
  npmGlobalPackages:
    vuepress: Not Found