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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

importmap in _html_repr_ fails in local notebooks (does work in collab) #6597

Open
Strilanc opened this issue Oct 21, 2022 · 3 comments
Open

Comments

@Strilanc
Copy link

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.

@jupyterlab-probot jupyterlab-probot bot added the status:Needs Triage Applied to issues that need triage label Oct 21, 2022
@RRosio
Copy link
Collaborator

RRosio commented Oct 27, 2022

Hi @Strilanc, thank you for submitting this issue. Could you please share which browser you are using? Would it be possible to test if this works for you in JupyterLab using Chrome? If so, Jupyter Notebook 7 should work as well . Thanks again!

@gabalafou
Copy link
Contributor

I misspoke during triage today.

Using JupyterLab version 4.0.0a30 in Brave, I am able to reproduce this issue (with or without shields up). Using the same version in Chrome, I am not able to reproduce; in other words, the code snippet above works in Chrome.

@Strilanc
Copy link
Author

Here is a recording of me reproducing the bug on the latest version of chrome: https://drive.google.com/file/d/1o24O9W4gXCVHE8CrLGUahX3n7YA2kVn9/view?usp=sharing

Setting up the python environment and starting the server:

image

Seeing the bug:

image

And the version of chrome (107.0.etc):

image

@RRosio RRosio added this to the 7.0 milestone Nov 3, 2022
@RRosio RRosio removed the status:Needs Triage Applied to issues that need triage label Nov 3, 2022
@andrii-i andrii-i modified the milestones: 7.0, 7.0.x Jun 13, 2023
@jtpio jtpio modified the milestones: 7.0.x, 7.4.0 Oct 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants