can't get pages to work on Windows 10

userquin commented 2 years ago

Describe the bug

Fails on alpha-1 and on alpha-2.

When navigating from Home page to Get Started page, all content pages appers under the sidebar, check first screenshot below.

If I refresh the page, all pages seems to be ok, but if I click on the sidebar title, then the Home page is wrong, check last screnshot.

I have tested the build with and without the PWA resulting in the same error.

The problem seems to be only on Windows 10 PRO, with development options enabled (on MacOS works), tested on private window on:

Chrome: Versión 102.0.5005.115 (Build oficial) (64 bits)
Microsoft Edge: Versión 102.0.1245.41 (Compilación oficial) (64 bits)
Firefox: 101.0.1 (64-bit)
Chome Canary: Versión 105.0.5122.0 (Build oficial) canary (64 bits)

Reproduction

You can check a preview on Netlify here: https://deploy-preview-304--vite-plugin-pwa.netlify.app/

Clone this branch https://github.com/antfu/vite-plugin-pwa/tree/userquin/feat-new-theme

Before running the docs install deps and build the plugin, from root folder run: pnpm install && pnpm run build

To run the docs on dev run from root folder: pnpm run docs.

To build and run the docs using vitepress preview, run from root folder: pnpm run docs:preview.

To build and run the docs using https, run from root folder: pnpm run docs:serve (will ask for creating and installing a TLS certificate for localhost via https-localhost dependency).

On dev it works as expected, but building and serving via serve dist or vitepress serve the problem is there on both cases.

To disable the PWA, just go to https://github.com/antfu/vite-plugin-pwa/blob/userquin/feat-new-theme/docs/vite.config.ts#L47 and add disable: true on VitePWA plugin:

    // https://github.com/antfu/vite-plugin-pwa
    VitePWA({
      disable: true, // <=== ADD THIS OPTION
      outDir: '.vitepress/dist',
      registerType: 'prompt',
      ...

Expected behavior

The pages should work as expected

System Info

Also failing on `netlify` preview (using vue 3.2.37):

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 42.99 GB / 63.95 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 102.0.5005.115
    Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.41)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vitepress: ^1.0.0-alpha.2 => 1.0.0-alpha.2

Additional context

There is an hydration error and a TypeError:

Errors loading Home page and navigating to Get Started

```ts Hydration completed but contains mismatches. f @ app.5ad12325.js:1 app.5ad12325.js:1 TypeError: Cannot read properties of null (reading 'parentNode') at remove (app.5ad12325.js:1:55339) at Object.remove (app.5ad12325.js:1:48276) at nt (app.5ad12325.js:1:45370) at Ii (app.5ad12325.js:1:45984) at nt (app.5ad12325.js:1:45260) at Qe (app.5ad12325.js:1:46221) at nt (app.5ad12325.js:1:45457) at Qe (app.5ad12325.js:1:46221) at nt (app.5ad12325.js:1:45457) at Qe (app.5ad12325.js:1:46221) Hc @ app.5ad12325.js:1 Wo @ app.5ad12325.js:1 pt @ app.5ad12325.js:1 Wr @ app.5ad12325.js:1 Promise.then (async) Ur @ app.5ad12325.js:1 jr @ app.5ad12325.js:1 (anonymous) @ app.5ad12325.js:1 Va @ app.5ad12325.js:1 wn @ app.5ad12325.js:1 zr @ app.5ad12325.js:1 (anonymous) @ app.5ad12325.js:1 Va @ app.5ad12325.js:1 wn @ app.5ad12325.js:1 zr @ app.5ad12325.js:1 (anonymous) @ app.5ad12325.js:1 Va @ app.5ad12325.js:1 wn @ app.5ad12325.js:1 et @ app.5ad12325.js:1 (anonymous) @ app.5ad12325.js:1 r @ app.5ad12325.js:1 await in r (async) n @ app.5ad12325.js:1 Ml.window.addEventListener.capture @ app.5ad12325.js:1 ```

Get Started page imagen

F5 on Get Started page imagen

Back to Home once F5 on Get Started page imagen

Validations

[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

userquin commented 2 years ago

On Chrome on android also with the same problem.

Al so failing on Windows 10 Home Edition on Firefox.

userquin commented 2 years ago

I'm using vue Teleport...

kecrily commented 2 years ago

vitepress.vuejs.org is also deployed on netlify, but it doesn't seem to have this problem

meteorlxy commented 2 years ago

I'm using vue Teleport...

I'm afraid VitePress does not handle teleport SSR as well.

userquin commented 2 years ago

The problem is related to the Teleport, I need to add the ReloadPrompt component twice, since we don't have a Layout slot, so I need to add it to some Home slot and also to some Content slot, and so when switching between pages there are 2 Teleport.

Maybe when Layout slots added and adding the component only once should work... I'll try it patching the VitePress Layout component...

userquin commented 2 years ago

@meteorlxy it seems to be not related to SSR, patching the Layout with the slots on https://github.com/vuejs/vitepress/issues/760 and adding the ReloadPrompt component only once using layout-bottom slot works.

userquin commented 2 years ago

The patch is quite simple, just adding this vite plugin:

    {
      name: 'vitepress-layout-slots-fix',
      enforce: 'pre',
      transform(code, id) {
        if (id.includes('Layout.vue') && !id.endsWith('.css'))
          return code.replace('<VPFooter />', '<VPFooter />\n<slot name="layout-bottom" />')
      },
    }

userquin commented 2 years ago

Now the Netlify preview works again: https://deploy-preview-304--vite-plugin-pwa.netlify.app/

vuejs / vitepress