"theme-default-content" class is rendering too late

[fvanwijk]

• [x] I confirm that this is an issue rather than a question.

Bug report

When serving the project from dist, the following styles are not applied on the main content div:

.theme-default-content:not(.custom) {
    max-width: 740px;
    margin: 0 auto;
    padding: 2rem 2.5rem;
}

This is because the theme-default-content class is not applied on the <Content /> component. See Page.vue.

After interaction, the class is suddenly added. This issue does not happen when running in dev mode.

Steps to reproduce

Build the project and serve dist folder.

(No example because it's a private project. Codesandbox throws 403 when I try to create and yarn create vuepress throws "TypeError: self.env.emit is not a function")

What is expected?

I expect the theme-default-content not to be replaced by the default__content class when server side rendered from static html files.

What is actually happening?

I have a simple Vuepress based on the default theme site with small modifications. To do so, I copied components from the default theme into my theme directory. To make it work, I updated some of the imports: make relative imports absolute, change @parent-theme into @theme, etc.

To workaround this issue I have to copy Page.vue into my theme and change <Content class="theme-default-content" /> into <div class="theme-default-content"><Content /></div>.

Other relevant information

The fix could be in ContentSlotsDistributor.js, but I don't understand the build process to fix it properly.

• Output of npx vuepress info in my VuePress project:

 System:
    OS: Linux 4.19 Ubuntu 18.04.2 LTS (Bionic Beaver)
    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.19.1 - /home/linuxbrew/.linuxbrew/bin/yarn
    npm: 6.14.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @vuepress/core:  1.3.1 
    @vuepress/theme-default:  1.3.1 
    vuepress: 1.3.1 => 1.3.1 
  npmGlobalPackages:
    vuepress: 1.3.1

Related issue: #731

[fvanwijk]

The proposed workaround by replacing <Content class="theme-default-content" /> with <div class="theme-default-content"><Content /></div> in Page.vue introduces a new issue. When you click an anchor link, it scrolls to the heading with some extra offset.

Now I workaround by duplicating the styles for .theme-default-content

.content__default:not(.custom) {
  max-width: 740px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
}

[adrianthedev]

Yup. Having the same issue. The theme-default-content isn't added when it's built for production. It's added by JS when you scroll around or click a link.

https://docs.avohq.io

[JoinChang]

Does this issue fixed? I'm also have this problem.

[fvanwijk]

No and no comment from dev team so far. With 83 PRs open at the moment I doubt if this project is still maintained actively.

Somebody understanding the build system (not me) could easily fix this and make a PR. For now I would go with the workaround I posted.

[JoinChang]

I found a solution to fix this problem (maybe). Edit @vuepress\theme-default\styles\config.styl and replace it with

$contentClass = '.content__default'

[frandiox]

@JoinChang thanks, that worked.

 "scripts": {
    "postinstall": "echo \\$contentClass = \\'.content__default\\' > node_modules/@vuepress/theme-default/styles/config.styl"
 }

[psi-4ward]

thx @JoinChang works for me

[victorgarciaesgi]

Having this bug too and I don't know what did I do wrong. Are you hosting your site on Netlify?

[justforuse]

Any process? just happened on build artifacts, local dev is ok