Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Plotly plots not showing in sphinx_rtd_theme #788

Open
Juanlu001 opened this issue Jul 20, 2019 · 3 comments

Comments

@Juanlu001
Copy link
Contributor

commented Jul 20, 2019

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 show (both locally and remotely) when using Alabaster just fine, but they don't show at all when using sphinx_rtd_theme.

Reproducible Project

Error Logs/Results

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

Screenshot from 2019-07-20 19-43-53

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
@Juanlu001

This comment has been minimized.

Copy link
Contributor Author

commented Jul 20, 2019

Commenting out this line brings Plotly back to life:

<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:

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:

Screenshot from 2019-07-21 01-40-02

Therefore I tried something crazy:

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

And now everything works like a charm.

Juanlu001 added a commit to Juanlu001/sphinx_rtd_theme that referenced this issue Jul 20, 2019

Juanlu001 added a commit to Juanlu001/poliastro that referenced this issue Jul 21, 2019

Juanlu001 added a commit to Juanlu001/poliastro that referenced this issue Jul 21, 2019

@humitos

This comment has been minimized.

Copy link
Member

commented Jul 21, 2019

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 comment has been minimized.

Copy link
Contributor

commented Jul 25, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can鈥檛 perform that action at this time.