TypeError: Invalid value used as weak map key

[troyzhxu]

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

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

[troyzhxu]

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

[troyzhxu]

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

[kt3721]

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

[hefeng6500]

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

Hi, kt3721. Did you solve this problem？

[kt3721]

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

[ktseo41]

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

Thx! After updating from vuepress v1 to v2, same error occurred. After adding clientAppEnhance.js and registering the component according to https://v2.vuepress.vuejs.org/advanced/cookbook/usage-of-client-app-enhance.html#register-vue-components document, it was solved.

[emerxom]

I had the same problem

[xiaoyunwu]

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

Thx! After updating from vuepress v1 to v2, same error occurred. After adding clientAppEnhance.js and registering the component according to v2.vuepress.vuejs.org/advanced/cookbook/usage-of-client-app-enhance.html#register-vue-components document, it was solved.

I think I had the same problem, can you try to a bit more concrete in term of how to do this? where do I add clientAppEnhance.js (inside themeConfig or outside, where to put it and what should be in that file) and how to register, the doc is not clear at all.

[zzzzz-l-break]

I had the same problem. has anyone solved it?

[ktseo41]

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

Thx! After updating from vuepress v1 to v2, same error occurred. After adding clientAppEnhance.js and registering the component according to v2.vuepress.vuejs.org/advanced/cookbook/usage-of-client-app-enhance.html#register-vue-components document, it was solved.

I think I had the same problem, can you try to a bit more concrete in term of how to do this? where do I add clientAppEnhance.js (inside themeConfig or outside, where to put it and what should be in that file) and how to register, the doc is not clear at all.

https://github.com/ktseo41/blog/commit/396227c339adcfe3bf282eaa77f842ea130723b2

here is my commit

• + src/.vuepress/clientAppEnhance.js

import { defineClientAppEnhance } from "@vuepress/client";
import ProgressBar from "./components/ProgressBar.vue";
import HideContent from "./components/HideContent.vue";
import StockChart from "./components/StockChart.vue";

export default defineClientAppEnhance(({ app, router, siteData }) => {
  app.component("ProgressBar", ProgressBar);
  app.component("HideContent", HideContent);
  app.component("StockChart", StockChart);
});

• - src/.vuepress/enhanceApp.js

[kiaking]

Duplicate https://github.com/vuejs/vitepress/issues/422

[wendongwoxin]

<div><my-comp></my-comp></div>when i try to change the root tag in the component, <el-row><my-comp></my-comp></el-row>, a magical thing happened，I succeeded.so, i think when u use template in your markdown, the template root can't be a simple tag,it can only be your template tag,like Element tags or your own compenent's tags

[SoldierAb]

I am having same issue:

[remirobichet]

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.

[linksfieldnet]

I encountered same problem then I found out I used this in my code

Cube <Badge text="default theme"/> is the 

... Remove it then its ok.

[Mustang-Galaxy]

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

does the font label must be removed ？ I want to keep it can it was solved ?

[vangleer]

The reason is that you used a component that does not exist. Check your markdown file and delete it.

[MisTraleuh]

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!

[brc-dd]

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)
      }
    }
  }
})