CodeGroup rendering tabs and CodeBlock on hard reload

[ThaNarie]

• 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

[d-pollard]

I hope to get to this in the next few days

[qcyblm]

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

[d-pollard]

I believe I just need to move this component to only be rendered on the client

[thecoden]

Hi @d-pollard
I am experiencing this issue as well, but am not familiar with the best way to move the component to client only. I tried doing something similar to @TimoBechtel fix on the docs, but that is not working for me so I believe the component needs to be modified.

I see the source of the ClientOnly component is:

export default {
  functional: true,
  render (h, { parent, children }) {
    if (parent._isMounted) {
      return children
    } else {
      parent.$once('hook:mounted', () => {
        parent.$forceUpdate()
      })
    }
  }
}

I am thinking of editing the CodeGroup component to hook this same functionality in. If you confirm or let me know the best way to fix it, I'm happy to submit a pull request as well.

[d-pollard]

I'll take a look at this in the next few days, I appreciate all the feedback!

[thecoden]

I'll take a look at this in the next few days, I appreciate all the feedback!

Thank you @d-pollard. Here to help as you need.

[d-pollard]

@thecoden - mind giving this PR a check to ensure it fixes your use-case? #2794

[d-pollard]

@qcyblm if you could make sure that PR fixes it for you too, I would greatly appreciate it! #2794

[d-pollard]

Screen.Recording.2021-02-09.at.7.15.10.PM.mov

Example of the issue + the fix

[qcyblm]

@qcyblm if you could make sure that PR fixes it for you too, I would greatly appreciate it! #2794

Hello @d-pollard ,Test the site https://qcyblm.github.io/vuepress-CodeGroup/,
Local test, CodeBlock tab can not be displayed.