Fix Plotly CDN rendering in nbviewer#5504
Conversation
nbviewer injects RequireJS; when plotly.js is loaded via a plain CDN <script>, it can be treated as an anonymous AMD/CommonJS module, triggering "Mismatched anonymous define()" and leaving `window.Plotly` undefined. - Wrap the CDN script tag with a guard that temporarily disables AMD/CommonJS detection and then restores it. - Drop the redundant connected renderer global-init module import. - Update renderer tests to cover the RequireJS guard and new init output.
|
I have attempted a fix of this - full disclosure I used codex to do most of the work because I don't know the library well enough to attempt a fix myself. The original issue has been sitting around for a while so I thought it was better to attempt a fix with AI than leave it unresolved. I hope that's ok. I'm happy to take input/feedback. |
|
Thanks for the PR! I'll take a look and follow up with you. |
|
I realize that I'm way overdue on this, but could you tell me if this is still an issue in the latest version of plotly.py? |
|
To add to my previous comment, I created a notebook with the following code: import plotly.io as pio
import plotly.graph_objects as go
pio.renderers.default = 'notebook_connected+colab'
fig = go.Figure(data=[go.Scatter(x=[1,2,3], y=[10,20,30])])
figI ran it in Jupyter with plotly.py v6.0.0 and saved it. I served it with nbviewer using Docker: docker run --rm -p 8080:8080 -v /path/to/local/notebooks:/notebooks jupyter/nbviewer python -m nbviewer --port=8080 --localfiles=/notebooksI saw the issue that you described. I then installed plotly.py v6.8.0, ran it in Jupyter, saved it, and loaded it in nbviewer again. The issue didn't occur. |
|
Ah yes this does appear fixed now. I upgraded to plotly 6.8, ran the notebook and pushed to github and now I see the plots rendering properly here https://nbviewer.org/github/mklilley/test/blob/main/Plotly-colab-nbviewer.ipynb Thanks for coming back to this 🙏 |
|
Closing since the underlying issue has been resolved. |
2 participants
Fix Plotly CDN rendering in nbviewer (RequireJS “mismatched anonymous define()”)
Related issue: #5314 (reported by @mklilley)
Summary
This PR fixes a bug where Plotly figures render correctly in Google Colab, but fail to render when the same notebook is viewed on nbviewer. The failure presents as:
Uncaught Error: Mismatched anonymous define() module(RequireJS)Uncaught ReferenceError: Plotly is not definedRoot Cause
nbviewer loads RequireJS on the page. When Plotly is included via a plain CDN
<script src="https://cdn.plot.ly/plotly-...min.js">, the Plotly bundle may detect an AMD/CommonJS environment (e.g.define.amd,module,exports) and register as an anonymous AMD module. RequireJS then throws the “mismatched anonymous define()” error, and Plotly does not end up attached towindow.Plotly, causing subsequentPlotly.newPlot(...)calls to fail.What This PR Changes
Guard Plotly CDN loading against RequireJS/AMD/CommonJS detection
plotly/io/_html.py, wheninclude_plotlyjs="cdn", the generated HTML now:define.amd,module, andexports.plotly-*.min.js.window.Plotlyis reliably defined in nbviewer.Remove redundant connected renderer global-init module import
plotly/io/_base_renderers.py,HtmlRenderer.activate()no longer injects an extra<script type="module">import ...</script>for connected renderers.Tests updated
tests/test_io/test_renderers.pyupdated to validate:Why This Approach
include_plotlyjs="cdn"behavior (still uses versioned CDN URL + SRI), while making it robust in AMD loader contexts.Files Changed
plotly/io/_html.pyplotly/io/_base_renderers.pytests/test_io/test_renderers.pyHow To Reproduce / Verify (from the issue)
pio.renderers.default = "notebook_connected+colab").Plotly is not defined, plot doesn’t render.Code PR
plotly.graph_objects, my modifications concern the code generator and not the generated files.include_plotlyjs="cdn"to avoid nbviewer/RequireJS breakage).