Adding Java Syntax highlighting makes dependency Redoc break

ubbe-xyz commented 2 years ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

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.
[X] I have tried creating a repro with https://new.docusaurus.io.
[X] I have read the console error message carefully (if applicable).

Description

Thanks for the fantastic work you're doing with Docusaurus 💚; we use it daily for the developer documentation at Apto.

We hit the following issue, which is puzzling us.

We have code block examples on our site using syntax highlighting. We also have our API specs embedded on the site using Redoc: it's just an OpenAPI file that Redoc is using to generate the HTML which in turn we embed on a page (see the reproduction repo on how this it's done).

The setup worked well for us until last week when we loaded java syntax highlighting as we added code examples in Java. The site built fine with no complaints, but it caused the following runtime error in our API pages:

TypeError: lang is undefined

I've scouted for similar issues but did not find any, and I don't understand the cause. Redoc also has prism as a dependency, so maybe it's weird dependency compatibility between the two projects?

I'm happy to help fix the error if indicated how 🙌🏽 ☕️

Reproducible demo

https://github.com/lluia/docusaurus-highlight-issue

Steps to reproduce

Clone and install dependencies on the reproducible demo
Start the development server yarn start
Navigate to the API page: http://localhost:3000/api
See the runtime error in the browser's console
Remove java as syntax highlighting in the Docusaurus config
Repeat the steps above
See the API page load as expected

Expected behavior

I can have a page that renders API documentation with Redoc without issues.

Actual behavior

In case I'm loading the java syntax highlighting:

  prism: {
    theme: lightCodeTheme,
    darkTheme: darkCodeTheme,
    additionalLanguages: ["kotlin", "java"],
  },

There's a runtime error trying to navigate to a page with Redoc.

Your environment

Public source code: https://github.com/lluia/docusaurus-highlight-issue
Public site URL: https://github.com/lluia/docusaurus-highlight-issue
Docusaurus version used: 2.0.0-beta.18
Environment name and version: any browser / Node 16
Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOS

Self-service

[X] I'd be willing to fix this bug myself.

Josh-Cena commented 2 years ago

Uhhh... It's indeed a Redoc problem and yes we had a past issue with this... https://github.com/facebook/docusaurus/issues/5443 (with Redocusaurus)

However that one was closed because it was basically unactionable. Since this one has a repro I could look into it in more detail. Thanks 👍

Brookke commented 2 years ago

including scala in the additional languages fixed it for me:

  prism: {
    theme: lightCodeTheme,
    darkTheme: darkCodeTheme,
    additionalLanguages: ["java", "scala"],
  },

thesamet commented 2 years ago

I came across the same issue when adding Scala, and the workaround of the code snippet above (adding java) worked for me as well. I initially thought it's a Prism issue, since other languages loaded correctly (tried protobuf). This comment suggests that language loading isn't done correctly.

gslg commented 1 year ago

I came across the same issue too. I followed this 2564#issuecomment and 8065#issuecomment , and it worked for me.

prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
        additionalLanguages: ['clike','java'],
}

and prism-clike.js:

(function (Prism) { 
    Prism.languages.clike = {
        'comment': [
            {
                pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
                lookbehind: true,
                greedy: true
            },
            {
                pattern: /(^|[^\\:])\/\/.*/,
                lookbehind: true,
                greedy: true
            }
        ],
        'string': {
            pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
            greedy: true
        },
        'class-name': {
            pattern: /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
            lookbehind: true,
            inside: {
                'punctuation': /[.\\]/
            }
        },
        'keyword': /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
        'boolean': /\b(?:false|true)\b/,
        'function': /\b\w+(?=\()/,
        'number': /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
        'operator': /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
        'punctuation': /[{}[\];(),.:]/
    };
}(Prism))

then,

npx docusaurus clear

waldyrious commented 2 weeks ago

It seems like there may be a way to fix this in Docusaurus, without requiring manual workarounds in local installs — see this comment in #5013.

facebook / docusaurus