Scala plugin exception: Uncaught TypeError: Cannot set properties of undefined (setting 'triple-quoted-string'

[thesamet]

Information:

• Prism version: 1.28.0
• Plugins: prism-scala
• Environment: Docusaurus v2.0.0-beta20, Browser

Description

I am upgrading docusaurus from an old alpha version to beta20 and on the way prism got updated from 1.22.0 to 1.28.0. Highlighting without scala works correctly, but when Scala enabled and I have triple markdown code, such as

...scala code

I am getting the following error in the console:

Download the React DevTools for a better development experience: https://fb.me/react-devtools
runtime~main.js:39 Uncaught TypeError: Cannot set properties of undefined (setting 'triple-quoted-string')
    at Object.extend (index.js?8808:254:1)
    at eval (prism-scala.js?10b9:1:1)
    at Object../node_modules/prismjs/components/prism-scala.js (main.js:1323:1)
    at __webpack_require__ (runtime~main.js:36:33)
    at fn (runtime~main.js:329:21)
    at webpackContext (main.js:1338:9)
    at eval (prism-include-languages.js?1078:16:1)
    at Array.forEach (<anonymous>)
    at prismIncludeLanguages (prism-include-languages.js?1078:13:1)
    at eval (prism-include-languages.js?a502:14:1)
extend @ index.js?8808:254
eval @ prism-scala.js?10b9:1
./node_modules/prismjs/components/prism-scala.js @ main.js:1323
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:329
webpackContext @ main.js:1338
eval @ prism-include-languages.js?1078:16
prismIncludeLanguages @ prism-include-languages.js?1078:13
eval @ prism-include-languages.js?a502:14
./node_modules/@docusaurus/theme-classic/lib/prism-include-languages.js @ main.js:759
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:329
eval @ client-modules.js?63bd:1
./.docusaurus/client-modules.js @ main.js:23
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:329
eval @ App.js:6
./node_modules/@docusaurus/core/lib/client/App.js @ main.js:55
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:329
eval @ clientEntry.js:7
./node_modules/@docusaurus/core/lib/client/clientEntry.js @ main.js:111
__webpack_require__ @ runtime~main.js:36
__webpack_exec__ @ main.js:1758
(anonymous) @ main.js:1759
__webpack_require__.O @ runtime~main.js:80
(anonymous) @ main.js:1760
webpackJsonpCallback @ runtime~main.js:1319
(anonymous) @ main.js:9

[RunDevelopment]

Could you please provide a code snippet that reproduces the issue?

[thesamet]

This happens for any snippet. Here are exact steps to reproduce:

1. Install docusaurus (https://docusaurus.io/docs/installation#scaffold-project-website)

npx create-docusaurus@latest my-website classic

Choose yarn as package manager.

2. Add Scala as an additional language (https://docusaurus.io/docs/markdown-features/code-blocks#supported-languages)

Edit my-website/docusaurus.config.js to add additionalLanguages array wtih Scala enabled:

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

3. Add any Scala snippet to a doc

Open docs/tutorial-basics/create-a-page.md and add something like

```scala
// hello!
```

4. Start a local server

yarn start, then visit localhost:3000 and you see a blank page. The dev console will show the exception in the original message.

[RunDevelopment]

Could you please try this:

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

I suspect that this is a bug with Docusaurus not loading Prism languages correctly.

[thesamet]

Yes, confirming that adding java to the list fixed Scala. Should this be reported as a Docusaurus bug then?

[RunDevelopment]

Yes. If they are loading languages just like they suggest here:

  additionalLanguages.forEach((lang) => {
    require(`prismjs/components/prism-${lang}`);
  });

Then, they do it incorrectly. They should probably use our loadLanguages API.

[wildcard]

The issue appears with https://github.com/FormidableLabs/prism-react-renderer too.
I guess there should be a better solution (loadLanguages API) for webpack-built packages (or I'm missing something 🙈 )

Thanks for the help @thesamet & @RunDevelopment 🙏