"Failed to resolve component" used in a markdown file

[JeremieLitzler]

Bug report

I am trying Vuepress using vuepress-vite package (installed globally).

It works well so far but I am hitting a wall now when I try to use a custom component (created under .vuepress/components) in a markdown file.

---
blog_index: true
---
# My articles

<!-- markdownlint-disable -->
<blog-index />

Steps to reproduce

Run:

• npm install && npm run docs:dev

Then browse to http://localhost:8080/blog/

In the console logs, I see:

[Vue warn]: Failed to resolve component: blog-index 
  at <Index.html> 
  at <AsyncComponentWrapper> 
  at <Content> 
  at <Page key="/blog/" > 
  at <BaseTransition mode="out-in" onBeforeEnter=fn<onBeforeEnter> onBeforeLeave=fn<pending>  ... > 
  at <Transition key=1 name="fade-slide-y" mode="out-in"  ... > 
  at <Layout> 
  at <AsyncComponentWrapper> 
  at <Vuepress onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy > > 
  at <RouterView> 
  at <VuepressApp>
warn2 @ runtime-core.esm-bundler.js:6871

• Reproduction link / repo:
  • See source component.
  • See source markdown or raw version.

Expected behavior

The BlogIndex component is loaded.

Environment info

• Browser: Chrome
• Output of vuepress info:

Environment Info:

  System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) i7-7600U CPU @ 2.80GHz       
  Binaries:
    Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 92.0.4515.107
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.67)     
  npmPackages:
    @vuepress/core:  2.0.0-beta.23
    @vuepress/theme-default:  2.0.0-beta.23
    vuepress: Not Found
  npmGlobalPackages:
    vuepress: Not Found

In addition, the build Netlify tells another error:

7:32:56 AM: ────────────────────────────────────────────────────────────────
7:32:56 AM:   1. Build command from Netlify app                             
7:32:56 AM: ────────────────────────────────────────────────────────────────
7:32:56 AM: ​
7:32:56 AM: $ npm install && npm run docs:build
7:33:06 AM: > esbuild@0.12.19 postinstall /opt/build/repo/node_modules/esbuild
7:33:06 AM: > node install.js
7:33:08 AM: npm notice created a lockfile as package-lock.json. You should commit this file.
7:33:08 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/rollup/node_modules/fsevents):
7:33:08 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
7:33:08 AM: npm WARN sass-loader@12.1.0 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself.
7:33:08 AM: added 209 packages from 256 contributors and audited 210 packages in 11.226s
7:33:08 AM: 27 packages are looking for funding
7:33:08 AM:   run `npm fund` for details
7:33:08 AM: found 0 vulnerabilities
7:33:08 AM: > journal@1.0.0 docs:build /opt/build/repo
7:33:08 AM: > vuepress-vite build docs
7:33:09 AM: info Initializing VuePress and preparing data...
7:33:09 AM: - Compiling with vite
7:33:14 AM: 
7:33:14 AM: (!) outDir /opt/build/repo/docs/.vuepress/dist is not inside project root and will not be emptied.
7:33:14 AM: Use --emptyOutDir to override.
7:33:14 AM: 
7:33:21 AM: ✔ Compiling with vite - done
7:33:21 AM: - Rendering pages
7:33:21 AM: - Rendering pages /
7:33:21 AM: - Rendering pages /blog/09-03-2020-be-nicer.html
7:33:21 AM: - Rendering pages /blog/12-02-2021-debugging-in-nodejs-and-vsc.html
7:33:21 AM: - Rendering pages /blog/20-12-2020-es6-by-wesbos.html
7:33:21 AM: - Rendering pages /blog/21-02-2018-bem-cheatsheet.html
7:33:21 AM: - Rendering pages /blog/21-02-2018-css-variables.html
7:33:21 AM: - Rendering pages /blog/22-02-2018-es2018-es2019-notes.html
7:33:21 AM: - Rendering pages /blog/22-03-2020-webresponsive-bootcamp-by-scrimba.html
7:33:21 AM: - Rendering pages /blog/22-03-2021-take-the-time.html
7:33:21 AM: - Rendering pages /blog/23-02-2018-mastering-css-grid.html
7:33:21 AM: - Rendering pages /blog/25-03-20-do-we-need-the-coronavirus-to-reduce-our-impact-on-our-environment.html
7:33:21 AM: - Rendering pages /blog/26-01-2021-js30-by-wesbos.html
7:33:21 AM: - Rendering pages /blog/28-01-2021-styleguide.html
7:33:21 AM: - Rendering pages /blog/
7:33:21 AM: ✖ Rendering pages - failed
7:33:21 AM: TypeError: Invalid value used as weak map key
7:33:21 AM:     at WeakMap.set (<anonymous>)
7:33:21 AM:     at normalizePropsOptions (/opt/build/repo/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:2218:15)
7:33:21 AM:     at createComponentInstance (/opt/build/repo/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5044:23)
7:33:21 AM:     at renderComponentVNode (/opt/build/repo/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:180:22)
7:33:21 AM:     at Object.ssrRenderComponent (/opt/build/repo/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:606:12)
7:33:21 AM:     at _sfc_ssrRender$c (/opt/build/repo/docs/.vuepress/dist/.server/app.js:1746:24)
7:33:21 AM:     at renderComponentSubTree (/opt/build/repo/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:246:13)
7:33:21 AM:     at renderComponentVNode (/opt/build/repo/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:197:16)
7:33:21 AM:     at renderVNode (/opt/build/repo/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:287:22)
7:33:21 AM:     at renderComponentSubTree (/opt/build/repo/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:252:13)
7:33:22 AM: npm ERR! code ELIFECYCLE
7:33:22 AM: npm ERR! errno 1
7:33:22 AM: npm ERR! journal@1.0.0 docs:build: `vuepress-vite build docs`
7:33:22 AM: npm ERR! Exit status 1
7:33:22 AM: npm ERR!
7:33:22 AM: npm ERR! Failed at the journal@1.0.0 docs:build script.
7:33:22 AM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
7:33:22 AM: npm ERR! A complete log of this run can be found in:
7:33:22 AM: npm ERR!     /opt/buildhome/.npm/_logs/2021-08-12T05_33_22_062Z-debug.log
7:33:22 AM: ​
7:33:22 AM: ────────────────────────────────────────────────────────────────
7:33:22 AM:   "build.command" failed                                        
7:33:22 AM: ────────────────────────────────────────────────────────────────
7:33:22 AM: ​
7:33:22 AM:   Error message
7:33:22 AM:   Command failed with exit code 1: npm install && npm run docs:build
7:33:22 AM: ​
7:33:22 AM:   Error location
7:33:22 AM:   In Build command from Netlify app:
7:33:22 AM:   npm install && npm run docs:build
7:33:22 AM: ​
7:33:22 AM:   Resolved config
7:33:22 AM:   build:
7:33:22 AM:     base: /opt/build/repo/docs/.vuepress
7:33:22 AM:     command: npm install && npm run docs:build
7:33:22 AM:     commandOrigin: ui
7:33:22 AM:     publish: /opt/build/repo/docs/.vuepress/dist
7:33:22 AM:     publishOrigin: ui

Is it related?

Thanks for the help.

[meteorlxy]

Please read migration guide carefully

https://github.com/vuepress/vuepress-next/blob/30eee4eaf7af1b4263505c86802f08782b64b7fa/docs/guide/migration.md#L172-L176

[JeremieLitzler]

Thanks @meteorlxy.

I used the manual registration through clientAppEnhance.

However, as I read the migration guide, I saw $site.pages was also dropped for scalability issues (#2689).

So, now:

1. how can we now list the markdown files in a directory from a component?
2. how can we access the frontmatter of each file?

When I look at VuePress > Page, I bet it is available but how?

Thanks for the time taken to answer.