Sites with custom theme works fine in development, but not in production

[TechAkayy]

Describe the bug

I have two Vitepress sites using custom theme, and they are working fine in development, but layout seems to be ignored in production. Please advise if I'm missing something. Thanks.

Reproduction

For development - npm run dev
For build & preview - npm run now

https://github.com/pinegrow/pg-vitepress-tailwindcss
https://github.com/pinegrow/pg-vitepress-tailwindcss-custom

Minimal - https://github.com/TechAkayy/my-vitepress-tailwindcss-custom-app

Expected behavior

Production should match with development.

System Info

System:
    OS: macOS 12.6.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.31 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 115.0.5790.170
    Chrome Canary: 118.0.5953.0
    Safari: 15.6.1
  npmPackages:
    vitepress: ^1.0.0-rc.4 => 1.0.0-rc.4

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

There are hydration issues. It's a not a bug with VitePress, but rather with your code. It'll be hard to debug for me as the code is too much. Try to debug it yourself, make web searches why mismatch happens, or provide me with a minimal reproducible example.

[TechAkayy]

Thanks for checking this out @brc-dd.

I have slimmed down the repo to be minimal, just one index.md file that uses one SampleCard.vue (auto-imported using unplugin-vue-components) that uses plain html without any state bindings from ChildCard.vue.

In development works great. But in prod (build & preview), hydration error is getting thrown which shouldn't happen as my template is valid.

Here is a weird thing I noticed:

The SampleCard.vue contains an empty script setup block (which is valid usage) with some comments for another dev. If I remove it, then production doesn't throw the above hydration error anymore.

I tried using these components in Nuxt, and no hydration error in production preview was thrown. It's happening only with Vitepress, hence my above report.

Thanks for looking into this. If you require any other info, let me know.

[TechAkayy]

I used https://jsonformatter.org/html-validator to validate the plain html in the ChildCard.vue that SampleCard.vue uses, and it's valid.

[brc-dd]

Your includes are wrong. Uncomment what you have commented. This works:

(The second one doesn't because . in regex matches any character, you need to escape it to check for dot)

Debugging

Run build with DEBUG='*'

Looks the line auto import plugin is not working properly for some reason if the script setup is not empty:

(left if I manually import ChildCard, right with your current code)

Removing lang="ts" is also working 🤔

Logs:

  # for right
  unplugin-vue-components:transformer /Users/brc-dd/my-vitepress-tailwindcss-custom-app/src/components/SampleCard.vue +13ms
  unplugin-vue-components:transform:component ^ (0) +13ms


  # for left
  unplugin-vue-components:transformer /Users/brc-dd/my-vitepress-tailwindcss-custom-app/src/components/SampleCard.vue +10ms
  unplugin-vue-components:transform:component | ChildCard +10ms
  unplugin-vue-components:transform:component ^ (1) +0ms

[TechAkayy]

Ohh wow.. I assumed auto-import was working as its components.d.ts did list all components. And that deleting empty script setup deceived my eyes.

That was very helpful. Thanks bunch!