Cannot render LaTeX

[SpintroniK]

trafficstars

Hi! I seem to be unable to render LaTeX in my nuxt/content site... More info below!

Version

@nuxt/content: 1.14.0 nuxt: 2.15.8

Reproduction Link

I just used the link from #102: https://github.com/benjamincanac/nuxt-content-latex

Steps to reproduce

To reproduce the issue, clone the above repo, and ran yarn yarn-upgrade-all, which lead to:

[Start]: yarn remove @nuxt/content && yarn add @nuxt/content 

[Done]: yarn remove @nuxt/content && yarn add @nuxt/content 
[Start]: yarn remove nuxt && yarn add nuxt 
[Done]: yarn remove nuxt && yarn add nuxt 
[Start]: yarn remove rehype-katex && yarn add rehype-katex 
[Done]: yarn remove rehype-katex && yarn add rehype-katex 
[Start]: yarn remove remark-math && yarn add remark-math 
[Done]: yarn remove remark-math && yarn add remark-math 
[Start]: yarn remove yarn-upgrade-all && yarn add --dev yarn-upgrade-all 
[Done]: yarn remove yarn-upgrade-all && yarn add --dev yarn-upgrade-all 

What is Expected?

yarn dev should run and the page should render the math correctly:

What is actually happening?

Two errors are fired before the server starts (note that it does start despite the errors):

yarn run v1.22.5
$ nuxt

 WARN  mode option is deprecated. You can safely remove it from nuxt.config


 ERROR  Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/jeremy/Desktop/nuxt-content-latex/node_modules/remark-math/index.js
require() of ES modules is not supported.
require() of /home/jeremy/Desktop/nuxt-content-latex/node_modules/remark-math/index.js from /home/jeremy/Desktop/nuxt-content-latex/node_modules/@nuxt/content/lib/utils.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/jeremy/Desktop/nuxt-content-latex/node_modules/remark-math/package.json.



 ERROR  Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/jeremy/Desktop/nuxt-content-latex/node_modules/rehype-katex/index.js
require() of ES modules is not supported.
require() of /home/jeremy/Desktop/nuxt-content-latex/node_modules/rehype-katex/index.js from /home/jeremy/Desktop/nuxt-content-latex/node_modules/@nuxt/content/lib/utils.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/jeremy/Desktop/nuxt-content-latex/node_modules/rehype-katex/package.json.


ℹ Parsed 1 files in 0,5 seconds                         @nuxt/content 14:31:57

Moreover, the page shows raw text:

The same thing happens on my nuxt/content project.

FYI, before the packages upgrade package.json versions are:

  "dependencies": {
    "@nuxt/content": "nuxt/content#feat\/rehype-plugins",
    "nuxt": "^2.0.0",
    "rehype-katex": "^3.0.0",
    "remark-math": "^2.0.1"
  }

After the packages upgrade:

  "dependencies": {
    "@nuxt/content": "^1.14.0",
    "nuxt": "^2.15.8",
    "rehype-katex": "^6.0.0",
    "remark-math": "^5.0.0"
  }

Thanks in advance for your help/inputs on that.

[ChristianMurphy]

This is related to https://github.com/nuxt/content/issues/941 and https://github.com/nuxt/content/issues/921. Nuxt content does not support the latest version for unified/remark/rehype, which the versions of rehype-katex and remark-math you are using require. And JavaScript modules, while standard, are not supported by Nuxt yet nuxt/nuxt.js#9302

The ideal fix would be nuxt and nuxt/content upgrade to support these. In the mean time, you can work around this, by downgrading remark-katex to version 5 and remark-math to version 4.

[data-miner00]

This is related to #941 and #921. Nuxt content does not support the latest version for unified/remark/rehype, which the versions of rehype-katex and remark-math you are using require. And JavaScript modules, while standard, are not supported by Nuxt yet nuxt/nuxt.js#9302

The ideal fix would be nuxt and nuxt/content upgrade to support these. In the mean time, you can work around this, by downgrading remark-katex to version 5 and remark-math to version 4.

Thanks @ChristianMurphy for the workaround, did exactly as told and it worked for me. Much appreciated.

[Tahul]

Hi, this issue concerns @nuxt/content v1 but is still relevant for @nuxt/content v2 as we don't have LaTeX support yet.

I am so adding both v1 and v2 tags.

If you are still interested in updates for @nuxt/content v2 you can keep following this issue.

[Kiyo5hi]

Any update on this? I can successfully make use of the remark plugin mentioned above for a production build with isCustomElement configured correctly. However, the build server still throws warning on custom elements in dev mode.