core: [Bug report] Rendering issues with tags

Bug report

Description

It seems like inserting <wbr> tags somehow duplicates the text in a paragraph. Originally asked in https://github.com/vuepress/vuepress-next/discussions/551, I was able to reproduce the issue without any plugins in a fresh project with a single README file containing a single line of text.

Steps to reproduce

Run the following shell script.

mkdir repro
cd repro
npm init -y
npm i -D vuepress-vite@2.0.0-beta.27
echo 'A <wbr> `0` <wbr> B <wbr> `1` C `2` <wbr> D <wbr> [E](./)' > README.md
npx vuepress-vite build

Serve the .vuepress/dist folder and open it in your browser.

Expected behavior

The page displays:

A 0 B 1 C 2 D E

Actual behavior

The page displays:

A 0 B 1 C 2 D E 0 B 1 C 2 D E

Interestingly, the page:

renders correctly with JavaScript disabled in the browser
renders correctly when viewing it with npx vuepress-vite dev
renders correctly when changing just about anything in the line of the README file

Screenshots

Serving the assets built by npx vuepress-vite build:

Serving via npx vuepress-vite dev:

Environment info

Browser:
Output of vuepress info:

# Paste output of `vuepress info` here
$ npx vuepress-vite info

  System:
    OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (4) x64 Intel(R) Core(TM) i5-4200M CPU @ 2.50GHz
    Memory: 1.67 GB / 7.53 GB
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 17.3.0 - ~/.nvm/versions/node/v17.3.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v17.3.0/bin/npm
  Utilities:
    Git: 2.30.2 - /usr/bin/git
  Browsers:
    Chrome: 96.0.4664.110
    Firefox: 91.4.1esr
  npmPackages:
    @vuepress/bundler-vite:  2.0.0-beta.27 
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli:  2.0.0-beta.27 
    @vuepress/client:  2.0.0-beta.27 
    @vuepress/core:  2.0.0-beta.27 
    @vuepress/markdown:  2.0.0-beta.27 
    @vuepress/plugin-active-header-links:  2.0.0-beta.27 
    @vuepress/plugin-back-to-top:  2.0.0-beta.27 
    @vuepress/plugin-container:  2.0.0-beta.27 
    @vuepress/plugin-debug: Not Found
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-git:  2.0.0-beta.27 
    @vuepress/plugin-google-analytics: Not Found
    @vuepress/plugin-medium-zoom:  2.0.0-beta.27 
    @vuepress/plugin-nprogress:  2.0.0-beta.27 
    @vuepress/plugin-palette:  2.0.0-beta.27 
    @vuepress/plugin-prismjs:  2.0.0-beta.27 
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-register-components: Not Found
    @vuepress/plugin-search: Not Found
    @vuepress/plugin-shiki: Not Found
    @vuepress/plugin-theme-data:  2.0.0-beta.27 
    @vuepress/plugin-toc: Not Found
    @vuepress/shared:  2.0.0-beta.27 
    @vuepress/theme-default:  2.0.0-beta.27 
    @vuepress/utils:  2.0.0-beta.27 
    vue:  3.2.26 
    vue-loader: Not Found
    vue-router:  4.0.12 
    vuepress: Not Found
    vuepress-vite: ^2.0.0-beta.27 => 2.0.0-beta.27

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 23 (21 by maintainers)

Most upvoted comments

I’ll look into it tomorrow

meteorlxy on May 25, 2022

Reported here: https://github.com/vuejs/core/issues/6008

meteorlxy on May 26, 2022

You can bump to 2.0.0-beta.46 and run build command with --debug flag, then check the browser console. It’s a hydration mismatch error. I’m afraid it is an internal issue of vue core.

meteorlxy on May 26, 2022

It does have a every low prority, meteorlxy is trying to add esm support, then we will probably split repo into vuepress/ecosystem and vuepress/core. And we may add some improvements to bundler config, and finally we will relook into this issue.

meteorlxy is busy in the past few days as he changed his job from 1 company to another. He is getting back to the project these days.

Mister-Hope on Apr 5, 2022