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.

[d-pollard]

@qcyblm it looks good for me, it renders the code block

[d-pollard]

Screen_Recording_20210209-230334_Firefox.mp4

@qcyblm it shows this for me

[d-pollard]

In chrome I get this too

[qcyblm]

In chrome I get this too

CodeBlock can't be rendered locally, can you fix it?

Source： https://github.com/qcyblm/vuepress-CodeGroup

The procedure： yarn && yarn dev

Preview： http://localhost:8080/vuepress-CodeGroup/

[d-pollard]

@qcyblm - 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?

[qcyblm]

• 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]

@d-pollard - You can clone the vuepress-CodeGroup to make changes and pull requests to me, I do local testing.

[thecoden]

I had the same issues as @qcyblm, but saw your changes right after I commented, so I deleted my comment and checked again.

It works beautifully now, thank you!

[d-pollard]

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!

[qcyblm]

My region is in China (it's 1:58 PM)

[d-pollard]

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