Syntax highlighting fails and breaks the formatting when hovering over nav

ArthurFlag commented 3 years ago

🐛 Bug Report

Prerequisites

[x] I'm using the latest version of Docusaurus.
[x] I have tried the npm run clear or yarn clear command.
[x] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[ ] I have tried creating a repro with https://new.docusaurus.io
[x] I have read the console error message carefully (if applicable)

Description

The highlighting and formatting of code blocks breaks when I hover over the top right menu items.

bug

This happens on all pages containing a code block.

Demo: https://docs.talon.one/docs/dev/getting-started/overview/

The console doesn't report any error.

Have you read the Contributing Guidelines on issues?

yes

Steps to reproduce

Go on a page that contains a code block.
hover over the top right menu items.

Expected behavior

The code blocks remain the same.

Actual behavior

Hovering over the menu breaks the codeblocks.

Your environment

Public source code: No but I can share whatever you need.
Public site URL: https://docs.talon.one/docs/dev/getting-started/overview/
Docusaurus version used: 2.0.0-beta.5
Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): tested on Firefox and Brave
Operating system and version (e.g. Ubuntu 20.04.2 LTS): -

Package.json dependencies

"dependencies": {
    "@docusaurus/core": "^2.0.0-beta.5",
    "@docusaurus/preset-classic": "^2.0.0-beta.5",
    "@docusaurus/theme-search-algolia": "^2.0.0-beta.5",
    "@mdx-js/react": "^1.6.22",
    "@svgr/webpack": "^5.5.0",
    "antd": "^4.9.4",
    "clsx": "^1.1.1",
    "core-js": "^3.8.1",
    "docusaurus-gtm-plugin": "^0.0.2",
    "docusaurus-plugin-sass": "^0.1.14",
    "file-loader": "^6.2.0",
    "https-browserify": "^1.0.0",
    "mobx": "^6.0.4",
    "path-browserify": "^1.0.1",
    "prism-react-renderer": "^1.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "redoc": "^2.0.0-rc.48",
    "redocusaurus": "^0.4.5",
    "sass": "^1.32.13",
    "styled-components": "^5.2.1",
    "url-loader": "^4.1.1"
  },

Let me know if you need extra information.

slorber commented 3 years ago

There is a console error when hovering those links (as Docusaurus fetch the linked page bundles on hover):

Uncaught (in promise) TypeError: Cannot set property 'triple-quoted-string' of undefined

Note: your target pages are totally inaccessible due to the same console error:

I suspect some of those pages is using scala code-blocks, for which you need to add java+scala languages in prism additional languages.

prism: {
  additionalLanguages: [
    'java',
    'scala',
  ],
},

ArthurFlag commented 3 years ago

Well done 👍 I do not use scala anywhere, but your suggestion fixed it.

Thanks a lot for the quick and quality answer. Greatly appreciated 👍

ArthurFlag commented 3 years ago

Somehow I can't get the same error as you mentioned and the issue still occurs.

I'm seeing: Error in parsing value for ‘position’. Declaration dropped. Error: Promised response from onMessage listener went out of scope 2 ExtensionMessagingService.js:89:34

How can I get more info on where the issue is exactly? Also why would an issue on another page breaks the formatting of the displayed page?

slorber commented 3 years ago

@ArthurFlageul when you hover a link, we load the JS bundle of the targeted page as an optimization. This JS bundle might interfere globally in the JS runtime in some way (for example if the target page use libs which use singleton variables, like Prism seems to do).

I can't tell you where these errors come from but they don't seem related to Docusaurus.

I suspect your formatting error is actually not related to such errors, but rather because this is not valid JSON:

 "effects": [ {   "campaignId": 377,   "rulesetId": 1096,   "ruleIndex": 0,   "ruleName": "25% off",   "effectType": "setDiscount",   "triggeredByCoupon": 97534,   "props": {     "name": "25% off",     "value": 66.25 }

Prism might have different behavior when running in Node and Browsers for this edge case. I suggest using valid json and add extra {} and see what happens. Also worth looking at what happens locally when rendering this code block with docusaurus start (which is always client-side rendered).

ArthurFlag commented 3 years ago

Continuing the conversation about the issue raised in the Prism repo. Adding {} doesnt fix this issue. It also seems that invalid content in code blocks doesn't bother Prism:

According to the comments in the Prism issue, the displayed page's code blocks is re-highlighted when we hover over links in Docusaurus.

If this is true, then I suspect that preventing a re-highlighting in Docusaurus would fix the problem. Is this something worth looking into?
Could it be related to the plugin system? I use Redocusaurus to display the API docs linked in the top nav.

drichards-87 commented 3 years ago

@ArthurFlageul I'm encountering the same issue as you with collapsing code blocks. One key difference is that hovering over links doesn't trigger the collapse like it does with your docs. For me, it appears to occur "randomly". For example, sometimes it happens while just looking at the page. Other times it happens while scrolling.

Update: I was wrong. I can consistently reproduce the issue by hovering over the navbar link to the API reference docs.

As a side note, I also use Redocusaurus (not sure if that has anything to do with it though).

Have you been able to make any headway into identifying the root cause/solution?

ArthurFlag commented 3 years ago

Hi @drichards-87, thanks for your comment, it's reassuring to see I'm not the only one 😆

I haven't been able to investigate much more but I'm still thinking it's related to the plugin system. Maybe we re-render the current page on pre-rendering a plugin-managed page and that could be avoided?

My knowledge of frontend is very limited, I don't think I could easily understand what Docusaurus or Redocsaurus does... 😞

ArthurFlag commented 2 years ago

I'm reopening this as I don't really know what the best approach would be. There's a mention of fixing the issue in Docusaurus. See this comment.

Josh-Cena commented 2 years ago

Now I don't see any error messages while reproducing the bug. Are you using the latest beta.9 @ArthurFlageul? There were a few changes around CodeBlock since beta.5, not sure if they would make a difference

slorber commented 2 years ago

yes, please try beta.9, we have fixed some React hydration problems and this bug may be fixed as a side-effect

ArthurFlag commented 2 years ago

I still get same problem 😬

armano2 commented 2 years ago

in my opinion main problem lays down in prism react plugin, in current (as is) implementation, styles are injected at runtime instead using css for it,

what do you guys think about removing runtime from it completely? and use css for colors?

that could fix some additional issues with highligting not working without js css file: https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-dark.css

this task is going to require us to process this file / import it conditionally on user config to add support for dark/light theme, but that shouldn't be a big issue

this is just an idea:

prism-react-renderer seem a little outdated and not maintained, maybe we could change it to use refractor if we need it at runtime react-syntax-highlighter if we don't need it at runtime @mapbox/rehype-prism

Josh-Cena commented 2 years ago

Another thing we need to consider is that react-live-editor uses Prism under the hood to achieve the consistent appearance as the plain code block. I'd actually consider the possibility of ditching react-live as well because that one's not well-maintained either.

Josh-Cena commented 2 years ago

@ArthurFlageul it's quite hard to debug given the customizations you've made and the unavailability of source code. I would conclude that redocusaurus is breaking your site because it does do magic on client side.

Following the discussion in https://github.com/rohit-gohri/redocusaurus/issues/89 and https://github.com/PrismJS/prism/issues/3066 I think they are right: it has something to do with redocusaurus remounting / reparsing code blocks client-side. I would inspect if Prism.manual is a good fix.

facebook / docusaurus