[Bug report] Rendering issues with <wbr> tags #602

KnorpelSenf · 2021-12-29T23:25:00Z

Bug report

Description

It seems like inserting <wbr> tags somehow duplicates the text in a paragraph. Originally asked in #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

The text was updated successfully, but these errors were encountered:

KnorpelSenf · 2021-12-29T23:32:36Z

This reproduces identically with the beta.32 release.

$ 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.50 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.32 
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli:  2.0.0-beta.32 
    @vuepress/client:  2.0.0-beta.32 
    @vuepress/core:  2.0.0-beta.32 
    @vuepress/markdown:  2.0.0-beta.32 
    @vuepress/plugin-active-header-links:  2.0.0-beta.32 
    @vuepress/plugin-back-to-top:  2.0.0-beta.32 
    @vuepress/plugin-container:  2.0.0-beta.32 
    @vuepress/plugin-debug: Not Found
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-external-link-icon:  2.0.0-beta.32 
    @vuepress/plugin-git:  2.0.0-beta.32 
    @vuepress/plugin-google-analytics: Not Found
    @vuepress/plugin-medium-zoom:  2.0.0-beta.32 
    @vuepress/plugin-nprogress:  2.0.0-beta.32 
    @vuepress/plugin-palette:  2.0.0-beta.32 
    @vuepress/plugin-prismjs:  2.0.0-beta.32 
    @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.32 
    @vuepress/plugin-toc: Not Found
    @vuepress/shared:  2.0.0-beta.32 
    @vuepress/theme-default:  2.0.0-beta.32 
    @vuepress/utils:  2.0.0-beta.32 
    vue:  3.2.26 
    vue-loader: Not Found
    vue-router:  4.0.12 
    vuepress: Not Found
    vuepress-vite: ^2.0.0-beta.32 => 2.0.0-beta.32 
    vuepress-webpack: Not Found

github-actions · 2022-01-06T01:01:54Z

This issue is marked as stale because it has not had recent activity. Issues marked with stale will be closed if they have no activity within 3 days.

KnorpelSenf · 2022-01-06T06:50:31Z

Bump

Mister-Hope · 2022-01-06T16:52:32Z

Does wbr a standard tag? If not, config Vue option isCustomComponent to let Vue ignore it. Search this repo, you can find similar issues like usage of center

KnorpelSenf · 2022-01-06T17:33:00Z

Yes, it's a standard tag. It's listed here: https://www.w3schools.com/TAGS/default.ASP

Also confer https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

Either way, I'll try your suggestion, thank you!

github-actions · 2022-01-14T00:58:27Z

This issue is marked as stale because it has not had recent activity. Issues marked with stale will be closed if they have no activity within 3 days.

KnorpelSenf · 2022-01-14T13:45:05Z

bump

Mister-Hope · 2022-03-01T07:05:24Z

https://github.com/vuepress/vuepress-next/blob/6d66a46a274c2b82a3d13a14555cbc6b77aff36e/packages/%40vuepress/bundler-vite/src/plugins/createConstantsReplacementPlugin.ts#L8

https://github.com/vuepress/vuepress-next/blob/6d66a46a274c2b82a3d13a14555cbc6b77aff36e/packages/%40vuepress/bundler-vite/src/plugins/createConstantsReplacementPlugin.ts#L52-L69

Updated. It must be related with the lines above, probably needs meteorlxy check what he is doing here.

This plugins seems to be built as a workaround to prevent some special contents being resolved by vite. But i am not full understand what it did here.

I think you can use bundler-webpack as a workaround.

KnorpelSenf · 2022-04-05T12:32:26Z

@meteorlxy are there any updates on this? Are you planning on working on this?

Mister-Hope · 2022-04-05T12:34:42Z

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 · 2022-04-05T12:35:29Z

This issue is probably related with a vite workaround, so you should be able to bypass it using webpack as bundler.

KnorpelSenf · 2022-04-05T12:36:14Z

This issue is probably related with a vite workaround, so you should be able to bypass it using webpack as bundler.

You mean, use webpack instead of vite?

Mister-Hope · 2022-04-05T12:36:54Z

Yes, though I did not test, it should work well with wepack. And if you do have workaround, it's fine for we to leave this issue after we reach out other goals.

KnorpelSenf · 2022-04-05T12:37:11Z

Thanks! We will try this.

KnorpelSenf · 2022-04-06T10:01:21Z

https://github.com/vuepress/vuepress-next/blob/6d66a46a274c2b82a3d13a14555cbc6b77aff36e/packages/%40vuepress/bundler-vite/src/plugins/createConstantsReplacementPlugin.ts#L52-L69

Updated. It must be related with the lines above, probably needs meteorlxy check what he is doing here.

This plugins seems to be built as a workaround to prevent some special contents being resolved by vite. But i am not full understand what it did here.

As far as I can tell, this code is unrelated to the problem. The respective part of the plugin is related to https://vitejs.dev/guide/env-and-mode.html#production-replacement. Also, I am able to reproduce the problem with the transform function returning exactly the same data as it receives, hence effectively being a no-op. In addition, the bug is only introduced client-side during hydration. (Note how disabling JS in the browser prevents the bug from happening.) This seems to me like the problem does not happen during rendering.

Mister-Hope · 2022-04-06T10:54:08Z

Emmm, is webpack working fine? This bug may come from vue and vite, and may not be releated to vuepress.

But only the above code in vuepress is related with <wbr> tags. And it is using this tag to hack the replacement.

If you ensure that the above code is not related with this issue, then probably it's not a vuepress bug.

KnorpelSenf · 2022-04-06T11:46:31Z

Emmm, is webpack working fine? This bug may come from vue and vite, and may not be releated to vuepress.

I can try webpack simply by using vuepress instead of vuepress-vite, correct? If so, then no, webpack does not work. The following script reproduces the issue.

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

But only the above code in vuepress is related with <wbr> tags. And it is using this tag to hack the replacement.

If you ensure that the above code is not related with this issue, then probably it's not a vuepress bug.

I am like 92 % sure, it's not my project so there might be some odd behaviour that I am not aware of. However, I think the above code is not running in the browser, and I have confirmed that it has no effect during rendering. What's more, the docs say it's about env vars, and my reproduction does not use any of those, so it should not apply. So I'd be very surprised if that was the offending plugin.

If it's not a vuepress bug, then what is it? I assume that vuepress uses the SSR feature of Vue, should I open an issue there?

KnorpelSenf · 2022-04-06T11:48:56Z

I have confirmed that it has no effect during rendering

What I basically did was to do a console.log at the end of transform which compared the function's return value === code. This check was always true, so transform always returns the same value as it recieves.

KnorpelSenf · 2022-05-25T13:51:43Z

This is affecting more and more places in our site. Is there any workaround for this? The respective parts are not interactive. For example, can we partially disable the hydration for certain DOM nodes?

I also don't mind investigating this, but I simply have no clue where to start. If you could give me a few 30,000ft-view guesses about which code is affected, I could move on from there.

meteorlxy · 2022-05-25T17:40:57Z

I'll look into it tomorrow

meteorlxy · 2022-05-26T03:13:54Z

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 · 2022-05-26T07:04:51Z

Reported here: vuejs/core#6008

KnorpelSenf · 2022-05-26T07:25:15Z

Thanks. I had played around with vuepress enough to have a feeling that it's in the Vue core lib, but I would've never figured it out.

I'll close this in favour of vuejs/core#6008.

KnorpelSenf mentioned this issue Jan 3, 2022

Fix SSR mismatch grammyjs/website#196

Closed

github-actions bot added the stale label Jan 6, 2022

github-actions bot removed the stale label Jan 6, 2022

github-actions bot added the stale label Jan 14, 2022

github-actions bot removed the stale label Jan 14, 2022

meteorlxy added the bug Something isn't working label Jan 15, 2022

Mister-Hope assigned meteorlxy Mar 1, 2022

KnorpelSenf mentioned this issue Apr 5, 2022

feat: migrate to vuepress-vite grammyjs/website#50

Merged

This was referenced Apr 6, 2022

[Bug report] Building by vite several times cause the same output with different inputs #772

Closed

[Enhancement] Improve bundler config #795

Closed

KnorpelSenf closed this as completed May 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug report] Rendering issues with <wbr> tags #602

[Bug report] Rendering issues with <wbr> tags #602

KnorpelSenf commented Dec 29, 2021

KnorpelSenf commented Dec 29, 2021

github-actions bot commented Jan 6, 2022

KnorpelSenf commented Jan 6, 2022

Mister-Hope commented Jan 6, 2022

KnorpelSenf commented Jan 6, 2022

github-actions bot commented Jan 14, 2022

KnorpelSenf commented Jan 14, 2022

Mister-Hope commented Mar 1, 2022 •

edited

Loading

KnorpelSenf commented Apr 5, 2022

Mister-Hope commented Apr 5, 2022 •

edited

Loading

Mister-Hope commented Apr 5, 2022

KnorpelSenf commented Apr 5, 2022

Mister-Hope commented Apr 5, 2022 •

edited

Loading

KnorpelSenf commented Apr 5, 2022 •

edited

Loading

KnorpelSenf commented Apr 6, 2022 •

edited

Loading

Mister-Hope commented Apr 6, 2022 •

edited

Loading

KnorpelSenf commented Apr 6, 2022 •

edited

Loading

KnorpelSenf commented Apr 6, 2022

KnorpelSenf commented May 25, 2022 •

edited

Loading

meteorlxy commented May 25, 2022

meteorlxy commented May 26, 2022

meteorlxy commented May 26, 2022

KnorpelSenf commented May 26, 2022

[Bug report] Rendering issues with <wbr> tags #602

[Bug report] Rendering issues with <wbr> tags #602

Comments

KnorpelSenf commented Dec 29, 2021

Bug report

Description

Steps to reproduce

Expected behavior

Actual behavior

Screenshots

Environment info

KnorpelSenf commented Dec 29, 2021

github-actions bot commented Jan 6, 2022

KnorpelSenf commented Jan 6, 2022

Mister-Hope commented Jan 6, 2022

KnorpelSenf commented Jan 6, 2022

github-actions bot commented Jan 14, 2022

KnorpelSenf commented Jan 14, 2022

Mister-Hope commented Mar 1, 2022 • edited Loading

KnorpelSenf commented Apr 5, 2022

Mister-Hope commented Apr 5, 2022 • edited Loading

Mister-Hope commented Apr 5, 2022

KnorpelSenf commented Apr 5, 2022

Mister-Hope commented Apr 5, 2022 • edited Loading

KnorpelSenf commented Apr 5, 2022 • edited Loading

KnorpelSenf commented Apr 6, 2022 • edited Loading

Mister-Hope commented Apr 6, 2022 • edited Loading

KnorpelSenf commented Apr 6, 2022 • edited Loading

KnorpelSenf commented Apr 6, 2022

KnorpelSenf commented May 25, 2022 • edited Loading

meteorlxy commented May 25, 2022

meteorlxy commented May 26, 2022

meteorlxy commented May 26, 2022

KnorpelSenf commented May 26, 2022

Mister-Hope commented Mar 1, 2022 •

edited

Loading

Mister-Hope commented Apr 5, 2022 •

edited

Loading

Mister-Hope commented Apr 5, 2022 •

edited

Loading

KnorpelSenf commented Apr 5, 2022 •

edited

Loading

KnorpelSenf commented Apr 6, 2022 •

edited

Loading

Mister-Hope commented Apr 6, 2022 •

edited

Loading

KnorpelSenf commented Apr 6, 2022 •

edited

Loading

KnorpelSenf commented May 25, 2022 •

edited

Loading