importmap in _html_repr_ fails in local notebooks (does work in collab)
Nobody has claimed this yet.
- Dominant language
- Jupyter Notebook
- Stars
- 13.3k
- Forks
- 5.8k
- Avg merge
- 6d 11h
- Merged PRs (30d)
- 7
Description
REPRO STEPS
From the command line, run jupyter notebook, create a new notebook, add a code cell, and put the following into the code cell:
class C:
def _repr_html_(self):
return """
<html>
<head>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.138.0/build/three.module.js"
}
}
</script>
</head>
<body>
<div id="out">loading...</div>
<script type="module">
import {Vector2} from "three";
document.getElementById("out").textContent = "worked!";
</script>
</body>
</html>
"""
C()
Make sure the notebook is trusted, and execute the cell.
WHAT SHOULD HAPPEN
The output should say "worked!".
More specifically, the output should be an html widget containing a div with its inner text set to "worked!".
Note that, in google collab, this is in fact the result you get.
WHAT ACTUALLY HAPPENS
The output gets stuck at "loading...". Additionally, if you open the browser's javascript console, you will find an error:
jquery.min.js:2 Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
at b (jquery.min.js:2:1)
at Pe (jquery.min.js:2:1)
at S.fn.init.append (jquery.min.js:2:1)
at OutputArea._safe_append (outputarea.js:458:1)
at OutputArea.append_execute_result (outputarea.js:497:1)
at OutputArea.append_output (outputarea.js:325:1)
at OutputArea.handle_output (outputarea.js:256:1)
at output (codecell.js:399:1)
at Kernel._handle_output_message (kernel.js:1199:1)
at i (jquery.min.js:2:1)
LIKELY CAUSE
It appears that, whatever mechanism is being used to translate the HTML returned by _repr_html_ into an output cell widget, it is not correctly translating import maps in a way that results in the javascript within the output cell having access to the declared import maps.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the trusted-notebook case from the issue, then trace output handling through outputarea.js and codecell.js, using the browser console error as the starting point. Compare how the returned HTML is appended locally with the reported behavior in Google Colab. Done means the local notebook renders the output with "worked!" and resolves the declared import map.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, jupyter-notebook
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100