Plotly plots rendered by nbsphinx not showing in sphinx_rtd_theme

[astrojuanlu]

Hi... sorry I'm the Plotly guy again 🙏 You may remember me from such issues as readthedocs/readthedocs.org#4367 #328 and others.

Problem

Plotly plots rendered by nbsphinx show (both locally and remotely) when using Alabaster just fine, but they don't show at all when using sphinx_rtd_theme.

Reproducible Project

• Repository: https://github.com/Juanlu001/rtd-js-test
• Project: https://readthedocs.org/projects/rtd-js-test/
• OK rendering: https://rtd-js-test.readthedocs.io/en/alabaster/
• No rendering: https://rtd-js-test.readthedocs.io/en/latest/

Error Logs/Results

Interestingly, the web developer console shows nothing with Alabaster, but with rtd_sphinx_theme shows a bunch of errors:

Expected Results

Plots should show regardless of the theme.

Environment Info

• Python Version: 3.7.4
• Sphinx Version: 2.1.2
• RTD Theme Version: 0.4.3

[astrojuanlu]

Commenting out this line brings Plotly back to life:

sphinx_rtd_theme/sphinx_rtd_theme/layout.html

Line 57 in bad2112

<script type="text/javascript" src="{{ pathto('_static/js/theme.js', 1) }}"></script>

And, looking at theme.js, it seems that require is already defined there:

sphinx_rtd_theme/sphinx_rtd_theme/static/js/theme.js

Line 3 in bad2112

require=function r(s,a,l){function c(e,n){if(!a[e]){if(!s[e]){var i="function"==typeof require&&require;if(!n&&i)return i(e,!0);if(u)return u(e,!0);var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}var o=a[e]={exports:{}};s[e][0].call(o.exports,function(n){return c(s[e][1][n]||n)},o,o.exports,r,s,a,l)}return a[e].exports}for(var u="function"==typeof require&&require,n=0;n<l.length;n++)c(l[n]);return c}({"sphinx-rtd-theme":[function(n,e,i){var jQuery="undefined"!=typeof window?window.jQuery:n("jquery");e.exports.ThemeNav={navBar:null,win:null,winScroll:!1,winResize:!1,linkScroll:!1,winPosition:0,winHeight:null,docHeight:null,isRunning:!1,enable:function(e){var i=this;void 0===e&&(e=!0),i.isRunning||(i.isRunning=!0,jQuery(function(n){i.init(n),i.reset(),i.win.on("hashchange",i.reset),e&&i.win.on("scroll",function(){i.linkScroll||i.winScroll||(i.winScroll=!0,requestAnimationFrame(function(){i.onScroll()}))}),i.win.on("resize",function(){i.winResize||(i.winResize=!0,requestAnimationFrame(function(){i.onResize()}))}),i.onResize()}))},enableSticky:function(){this.enable(!0)},init:function(i){i(document);var t=this;this.navBar=i("div.wy-side-scroll:first"),this.win=i(window),i(document).on("click","[data-toggle='wy-nav-top']",function(){i("[data-toggle='wy-nav-shift']").toggleClass("shift"),i("[data-toggle='rst-versions']").toggleClass("shift")}).on("click",".wy-menu-vertical .current ul li a",function(){var n=i(this);i("[data-toggle='wy-nav-shift']").removeClass("shift"),i("[data-toggle='rst-versions']").toggleClass("shift"),t.toggleCurrent(n),t.hashChange()}).on("click","[data-toggle='rst-current-version']",function(){i("[data-toggle='rst-versions']").toggleClass("shift-up")}),i("table.docutils:not(.field-list,.footnote,.citation)").wrap("<div class='wy-table-responsive'></div>"),i("table.docutils.footnote").wrap("<div class='wy-table-responsive footnote'></div>"),i("table.docutils.citation").wrap("<div class='wy-table-responsive citation'></div>"),i(".wy-menu-vertical ul").not(".simple").siblings("a").each(function(){var e=i(this);expand=i('<span class="toctree-expand"></span>'),expand.on("click",function(n){return t.toggleCurrent(e),n.stopPropagation(),!1}),e.prepend(expand)})},reset:function(){var n=encodeURI(window.location.hash)||"#";try{var e=$(".wy-menu-vertical"),i=e.find('[href="'+n+'"]');if(0===i.length){var t=$('.document [id="'+n.substring(1)+'"]').closest("div.section");0===(i=e.find('[href="#'+t.attr("id")+'"]')).length&&(i=e.find('[href="#"]'))}0<i.length&&($(".wy-menu-vertical .current").removeClass("current"),i.addClass("current"),i.closest("li.toctree-l1").addClass("current"),i.closest("li.toctree-l1").parent().addClass("current"),i.closest("li.toctree-l1").addClass("current"),i.closest("li.toctree-l2").addClass("current"),i.closest("li.toctree-l3").addClass("current"),i.closest("li.toctree-l4").addClass("current"),i[0].scrollIntoView())}catch(o){console.log("Error expanding nav for anchor",o)}},onScroll:function(){this.winScroll=!1;var n=this.win.scrollTop(),e=n+this.winHeight,i=this.navBar.scrollTop()+(n-this.winPosition);n<0||e>this.docHeight||(this.navBar.scrollTop(i),this.winPosition=n)},onResize:function(){this.winResize=!1,this.winHeight=this.win.height(),this.docHeight=$(document).height()},hashChange:function(){this.linkScroll=!0,this.win.one("hashchange",function(){this.linkScroll=!1})},toggleCurrent:function(n){var e=n.closest("li");e.siblings("li.current").removeClass("current"),e.siblings().find("li.current").removeClass("current"),e.find("> ul li.current").removeClass("current"),e.toggleClass("current")}},"undefined"!=typeof window&&(window.SphinxRtdTheme={Navigation:e.exports.ThemeNav,StickyNav:e.exports.ThemeNav}),function(){for(var r=0,n=["ms","moz","webkit","o"],e=0;e<n.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[n[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[n[e]+"CancelAnimationFrame"]||window[n[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(n,e){var i=(new Date).getTime(),t=Math.max(0,16-(i-r)),o=window.setTimeout(function(){n(i+t)},t);return r=i+t,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(n){clearTimeout(n)})}()},{jquery:"jquery"}]},{},["sphinx-rtd-theme"]);

Notice that Plotly needs require.js, but the require defined in the sphinx_rtd_theme seems to be not compatible with it. If I comment out the require.js import:

Therefore I tried something crazy:

$ sed -i 's/require/require_rtd/g' _static/js/theme.js

And now everything works like a charm.

[humitos]

Using Google Chrome, one thing that I found is that plotly.js is giving 404 and that's why it does not render properly on readthedocs theme. But, if you look closer, alabaster version loads https://cdn.plot.ly/plotly-latest.min.js, but readthedocs theme tries to load https://rtd-js-test.readthedocs.io/en/latest/plotly.js

Both themes load the same version of require.js from https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js so I don't think this is the problem.

I'm not sure, but I think what it's overlapping here is require module from Browserify from the Read the Docs Sphinx Theme --used here for example-- with require variable defined by require.js.

And... it seems to be a known issue: https://stackoverflow.com/a/25586213. They say that the solution could be to use window.require instead of require in the Javascript code from Read the Docs Theme.

There are more context about this on a issue on Browserify repo: browserify/browserify#790

It seems this is a potential good reason about why this is failing on Read the Docs Sphinx (BTW, alabaster does not include any JS at all).

[jessetan]

This is a good issue to revisit after #771 is merged which moves our build process to webpack, without browserify

[nvaytet]

Hi, we are also trying to use plotly on our documentation pages (https://scipp.readthedocs.io/en/latest/user-guide/plotting.html#Plotting-data-with-3-and-more-dimensions).
I see that #771 was merged in July. Does this mean that in principle plotly should now just work if the Pypi package gets updated? Or does it mean that more work is required to get this working?
Thanks!

[astrojuanlu]

If anything, probably this issue is not blocked anymore?

[lpravda]

Hi all, is there any update on this? pypi has not been updated since last year, and if I clone the master branch and use this, it still exhibits the same issue.

Thank you :)!