vuepress: CodeGroup rendering tabs and CodeBlock on hard reload

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

Bug report

Steps to reproduce

Visit a VuePress docs pages that renders multiple CodeBlocks in a CodeGroup, e.g. https://mubanjs.github.io/muban/guide/#installing

What is expected?

The tabs showing up, and the first tab showing highlighted code.

What is actually happening?

No tabs showing (although the space is there), and instead a highlighted message:

// Make sure to add code blocks to your code group

Other relevant information

When navigating to another page and back, the CodeGroup displays correctly.

It seems like it’s some kind of re-hydration issue when using the rendered HTML.

It also seems to not happen locally.

Output of npx vuepress info in my VuePress project:

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
  Browsers:
    Chrome: 86.0.4240.198
    Edge: Not Found
    Firefox: 81.0.2
    Safari: 13.1.2
  npmPackages:
    @vuepress/core:  1.7.1 
    @vuepress/theme-default:  1.7.1 
    vuepress: ^1.7.1 => 1.7.1 
  npmGlobalPackages:
    vuepress: Not Found

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 21

Commits related to this issue

docs(quick-start): fix install snippet not rendering vuepress build does not prerender code-blocks correctly. fixed by surrounding it with a ClientOnly block to force it to be rendered dynamically. S... — committed to TimoBechtel/socketdb by TimoBechtel 3 years ago
fix($core): component CodeGroup loads correctly on clientfix #2711 (#2794) * fix($core): wrap code group in ClientOnly * fix($core): component CodeGroup loads correctly on client * fix($core): ... — committed to vuejs/vuepress by d-pollard 3 years ago
Switch to card-style tabs to prevent SSR rendering issues of code-groups Once [this issue]( https://github.com/vuejs/vuepress/issues/2711) with VuePress is fixed, we might be able to use the prettier... — committed to strapi/documentation by pwizla 3 years ago
New Quick Start Guide (#288) * Add code-switcher vuepress plugin * Create POC of code-switcher plugin usage * Remove code-switcher plugin, add copy-code plugin - code-switcher plugin is not ... — committed to strapi/documentation by pwizla 3 years ago

Most upvoted comments

#2686 to reproduce the problem and get no reply.
I’ve solved this problem and need to manually add CodeGroup and CodeBlock to the global component:

// .vuepress/enhanceApp.js
import Vue from 'vue'
import CodeBlock from "@theme/global-components/CodeBlock.vue"
import CodeGroup from "@theme/global-components/CodeGroup.vue"
// Register the Vue global component
Vue.component(CodeBlock)
Vue.component(CodeGroup)

qcyblm on Nov 20, 2020

Should be fixed as of https://github.com/vuejs/vuepress/releases/tag/v1.8.1

d-pollard on Feb 11, 2021

Sweet; okay I’ll work on getting this merged in the AM (it’s 1:00AM here lol I’m tired)

Have a good day/night everyone!

d-pollard on Feb 10, 2021

thanks for the clarification; I was able to debug and fix the issue you’re seeing. Mind pulling down my recent changes and verifying that they work for you?

Yes, and verify that they work for me.

qcyblm on Feb 10, 2021