Plotly plots are not shown on Sphinx 4

[astrojuanlu]

Describe the bug

As demonstrated in https://sphinx-widgets-test.readthedocs.io/en/latest/Plotly%20plot.html, Plotly plots are not shown in Sphinx 4, and a bunch of JavaScript errors appear on the console:

However, if I switch to Sphinx 3, as in https://sphinx-widgets-test.readthedocs.io/en/sphinx-3/Plotly%20plot.html, the plots are shown normally and no JS errors can be seen:

This is with Alabaster, but in poliastro/poliastro#1308 I was using sphinx_rtd_theme, with identical result.

I am not sure where the bug is, since there are several systems interacting here (sphinx, nbsphinx, plotly). But I hope it serves as a good starting point for debugging.

How to Reproduce

Bad:

$ git clone https://github.com/astrojuanlu/sphinx-widgets-test
$ cd sphinx-widgets-test
$ pip install -r requirements.txt
$ cd docs
$ make html
$ # open _build/html/index and see the error

Good:

$ cd sphinx-widgets-test
$ git switch sphinx-3
$ cd docs
$ rm -rf _build
$ make html
$ # open _build/html/index and see that the plot displays correctly

Expected behavior

The plots show normally.

Your project

https://github.com/astrojuanlu/sphinx-widgets-test

Screenshots

No response

OS

Linux Mint

Python version

3.9

Sphinx version

Sphinx 3.5.4 (good) and 4.1.2 (bad)

Sphinx extensions

nbsphinx

Extra tools

No response

Additional context

No response

[astrojuanlu]

cc @nicolaskruchten @mgeier

[nicolaskruchten]

That MIME-type error suggests that there is a misconfiguration in your HTTP server such that the Plotly.js file cannot be interpreted as Javascript, at first read.

[astrojuanlu]

To clarify, this happens both locally with python -m http.server as well as online as served by Read the Docs.

[nicolaskruchten]

I see a different error here: https://sphinx-widgets-test.readthedocs.io/en/latest/Plotly%20plot.html ... do you have a Plotly-compatible version of MathJax installed? Plotly is compatible with MathJax 2.7.9 but not 3.x.

[astrojuanlu]

Indeed, https://sphinx-widgets-test.readthedocs.io/en/latest/Plotly%20plot.html loads MathJax 3. I tested changing the Sphinx configuration to MathJax 2 in https://sphinx-widgets-test.readthedocs.io/en/mathjax-2-sphinx-4/Plotly%20plot.html and looks like now the plot loads. Thanks @nicolaskruchten, I guess there is nothing else to do here.

[mgeier]

See also spatialaudio/nbsphinx#572 (comment) and plotly/plotly.py#3152 (comment).

[astrojuanlu]

That solution works, thanks to both. Closing!