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

fvanwijk commented 4 years ago

[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 commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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

fvanwijk commented 3 years ago

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 commented 3 years ago

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

$contentClass = '.content__default'

frandiox commented 3 years ago

@JoinChang thanks, that worked.

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

psi-4ward commented 3 years ago

thx @JoinChang works for me

victorgarciaesgi commented 2 years ago

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

justforuse commented 2 years ago

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

vuejs / vuepress