vitepress: TypeError: Invalid value used as weak map key

Describe the bug

execuce the command:

vitepress build docs

output:

yarn run v1.22.11
$ vitepress build docs
vitepress v0.20.0
✓ building client + server bundles...
✖ rendering pages...
build error:
 TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at normalizePropsOptions (E:\SpaceMine\grails-docs\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:2150:15)
    at createComponentInstance (E:\SpaceMine\grails-docs\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:4983:23)
    at renderComponentVNode (E:\SpaceMine\grails-docs\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:194:22)
    at Object.ssrRenderComponent (E:\SpaceMine\grails-docs\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:620:12)
    at _sfc_ssrRender (E:\SpaceMine\grails-docs\node_modules\vitepress\dist\client\app\temp\guide_command-line.md.js:47:24)
    at renderComponentSubTree (E:\SpaceMine\grails-docs\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:260:13)
    at renderComponentVNode (E:\SpaceMine\grails-docs\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:211:16)
    at renderVNode (E:\SpaceMine\grails-docs\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:301:22)
    at renderVNodeChildren (E:\SpaceMine\grails-docs\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:316:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

and there is no information to locate where was wrong.

Reproduction

follow the steps:

> git clone https://gitee.com/ejlchina-zhxu/grails-docs.git
> cd grails-docs
> yarn install
> yarn build

and the error will occurs

Expected behavior

the output of vitepress build docs should show where the problem is so that i can fix it

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-4460  CPU @ 3.20GHz
    Memory: 8.19 GB / 15.90 GB
  Binaries:
    Node: 14.17.5 - H:\ProgramBase\Node\v14.17.5\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.14 - H:\ProgramBase\Node\v14.17.5\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (93.0.961.52)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    vitepress: ^0.20.0 => 0.20.0

Additional context

No response

Validations

Follow our Code of Conduct
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 19 (2 by maintainers)

Most upvoted comments

but i still hope that the error output can indicate where the error is

troyzhxu on Nov 20, 2021

I found a reason: there are a few <font> tag in the markdown file

troyzhxu on Oct 28, 2021

This problem comes from your code. There is for sure some improvement to bring to error tracking. (cf #422) I manage to track the error by temporary adding a console.log() to vue runtime file node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js as follow :

// under `normalizePropsOptions` function
...
if (!raw && !hasExtends) {
  console.log(comp) // <-- Add this line
  cache.set(comp, shared.EMPTY_ARR);
  return shared.EMPTY_ARR;
}
...

Then rerun build command. The last console output should give you some clue about the error source.

remirobichet on Jul 12, 2022

It seems that using unsupported html tags or undeclared components will cause this problem

Hi, kt3721. Did you solve this problem？

I used the vue component in markdown, and the unregistered component was used in the component, it will be fine after modification

kt3721 on Nov 25, 2021

Deprecated and non-standard html tags are not recognized as native HTML tags by Vue template compiler. Vue will try to resolve those tags as if they are Vue components. And likely they won’t exist in scope and hence Vue will throw this error. This error will be there for all sorts of non-existing components (whether or not they are some old html tags). Here is a sibling article from VuePress docs: https://v2.vuepress.vuejs.org/guide/markdown.html#cautions

In VitePress the config is like this:

// .vitepress/config.ts

import { defineConfig } from 'vitepress'

const customElements = [
  'font',
  'center'
]

export default defineConfig({
  vue: {
    template: {
      compilerOptions: {
        isCustomElement: (tag) => customElements.includes(tag)
      }
    }
  }
})

brc-dd on Aug 23, 2022

Hello, For more than 2 months I have the same problem but I finally found a solution!

Actually the problem comes from the <font> tags for some reason, but if you want to add color or something you can use the <span> tags which have the same attributes.

For example in a code like this:

I like <font color="blue">tomato</font> -> I like tomato (tomato in red)

You’ll have a compiler hassle but using now

I like <span style="color:red">tomato</span> -> Got the same result as above

The output will be correct like this :

info Initializing VuePress and preparing data...
✔ Compiling with vite - done
✔ Rendering pages - done
success VuePress build successfully!

MisTraleuh on Aug 23, 2022