facebook / facebook/docusaurus

Adding Java Syntax highlighting makes dependency Redoc break

Open
#7,209 5 comments 1 reaction 0 assignees View on GitHub
bug external status: needs more information
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#reporting-new-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](docs.aptopayments.com/) at Apto.

We hit the following issue, which is puzzling us.

We have [code block examples](https://docusaurus.io/docs/markdown-features/code-blocks#syntax-highlighting) on our site using syntax highlighting. We also have our [API specs](https://docs.aptopayments.com/api/mobile-api) embedded on the site using [Redoc](https://github.com/Redocly/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

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

### Expected behavior

I can have a page that renders API documentation with [Redoc](https://github.com/Redocly/redoc) without issues.

### Actual behavior

In case I'm loading the `java` syntax highlighting:
```js
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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.