Can't use templates from Jupyter Notebook or JupyterLab

dennisjlee commented 4 weeks ago

ALL software version info

Computer: Mac OSX 14.5, M3 Max Python: 3.10.14 Browser: Chrome 127.0.6533.100 arm64

Libraries: panel 1.4.5 bokeh 3.4.2 jupyterlab 4.2.4 jupyterlab_widgets 3.0.11 notebook 7.2.1

My panel config details:

_config(_admin=False, _admin_endpoint=None, _admin_log_level='DEBUG', _basic_auth=None, _comms='default', _console_output=None, _cookie_secret=None, _embed=None, _embed_json=False, _embed_json_prefix='', _embed_load_path=None, _embed_save_path='./', _inline=None, _log_level='WARNING', _npm_cdn='https://cdn.jsdelivr.net/npm', _nthreads=None, _oauth_encryption_key=None, _oauth_expiry=1, _oauth_extra_params={}, _oauth_guest_endpoints=None, _oauth_jwt_user=None, _oauth_key=None, _oauth_optional=False, _oauth_provider=None, _oauth_redirect_uri=None, _oauth_refresh_tokens=False, _oauth_secret=None, _theme=None, admin_plugins=[], apply_signatures=True, auth_template=None, authorize_callback=None, autoreload=False, basic_auth_template=None, browser_info=True, css_files=[], defer_load=False, design=None, disconnect_notification='', exception_handler=None, global_css=[], global_loading_spinner=False, js_files={}, js_modules={}, layout_compatibility='warn', load_entry_points=True, loading_color='#c3c3c3', loading_indicator=False, loading_max_height=400, loading_spinner='arc', name='_config00003', notifications=False, profiler=None, raw_css=[], ready_notification='', reuse_sessions=False, safe_embed=False, session_history=0, session_key_func=None, sizing_mode=None, template=None, throttled=False)

Description of expected behavior and the observed behavior

When I try to use a panel template (like panel.template.MaterialTemplate or panel.templates.BootstrapTemplate) from a Jupyter Notebook or JupyterLab, I expect it to work.

The actual behavior I'm getting is that the template fails to load CSS and JS files and therefore does not render correctly at all. It is using paths that lead to a 404 from the Jupyter server, for instance http://localhost:8888/notebooks/local_notebooks/static/extensions/panel/css/markdown.css?v=1.4.5 (note that my notebook is in a directory called local_notebooks relative to where the jupyter notebook server was launched).

On JupyterLab, the path is slightly different but still a 404 http://localhost:8888/doc/tree/local_notebooks/static/extensions/panel/css/markdown.css?v=1.4.5

Note that the template works if I launch the notebook using panel serve Untitled.ipynb instead

Complete, minimal, self-contained example code that reproduces the issue

Untitled.ipynb:

import panel as pn

pn.extension()

template = pn.template.MaterialTemplate()
template.main.append("# Hello World")
template.servable()

Then run

jupyter notebook Untitled.ipynb

Stack traceback and/or browser JavaScript console output

Browser console errors:

VM2903:4 Uncaught ReferenceError: mdc is not defined
    at <anonymous>:4:17
    at w.attachWidget (911.bundle.js:1:18414)
    at w.insertWidget (911.bundle.js:1:17908)
    at x._insertOutput (7226.bundle.js:1:10481)
    at x.onModelChanged (7226.bundle.js:1:6952)
    at a (409.bundle.js:1:2625)
    at e.emit (409.bundle.js:1:2354)
    at o.emit (409.bundle.js:1:334)
    at d._onListChanged (7226.bundle.js:1:2896)
    at a (409.bundle.js:1:2625)
(anonymous) @ VM2903:4
attachWidget @ 911.bundle.js:1
insertWidget @ 911.bundle.js:1
_insertOutput @ 7226.bundle.js:1
onModelChanged @ 7226.bundle.js:1
a @ 409.bundle.js:1
e.emit @ 409.bundle.js:1
emit @ 409.bundle.js:1
_onListChanged @ 7226.bundle.js:1
a @ 409.bundle.js:1
e.emit @ 409.bundle.js:1
emit @ 409.bundle.js:1
push @ 170.bundle.js:1
_add @ 7226.bundle.js:1
add @ 7226.bundle.js:1
_onIOPub @ 7226.bundle.js:1
_handleIOPub @ 3676.bundle.js:1
await in _handleIOPub
handleMsg @ 3676.bundle.js:1
_handleMessage @ 3676.bundle.js:1
(anonymous) @ 3676.bundle.js:1
Promise.then
_onWSMessage @ 3676.bundle.js:1
709:34:52.885 Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
09:34:52.807 Untitled.ipynb:1 Refused to apply style from 'http://localhost:8888/notebooks/local_notebooks/static/extensions/panel/css/markdown.css?v=1.4.5' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
09:34:52.807 Untitled.ipynb:1 Refused to apply style from 'http://localhost:8888/notebooks/local_notebooks/static/extensions/panel/css/loadingspinner.css?v=1.4.5' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
09:34:52.813 Untitled.ipynb:1 Refused to apply style from 'http://localhost:8888/notebooks/local_notebooks/static/extensions/panel/css/loading.css?v=1.4.5' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
09:34:52.813 Untitled.ipynb:1 Refused to apply style from 'http://localhost:8888/notebooks/local_notebooks/static/extensions/panel/bundled/material-components-web@7.0.0/dist/material-components-web.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
09:34:52.813 Untitled.ipynb:1 Refused to apply style from 'http://localhost:8888/notebooks/local_notebooks/static/extensions/panel/bundled/theme/default.css?v=1.4.5' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
09:34:52.815 Untitled.ipynb:1 Refused to apply style from 'http://localhost:8888/notebooks/local_notebooks/static/extensions/panel/bundled/theme/material_variables.css?v=1.4.5' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
09:34:52.834 Untitled.ipynb:1 Refused to apply style from 'http://localhost:8888/notebooks/local_notebooks/static/extensions/panel/bundled/materialtemplate/material.css?v=1.4.5' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
09:34:52.824 Untitled.ipynb:1 Refused to execute script from 'http://localhost:8888/notebooks/local_notebooks/static/extensions/panel/bundled/material-components-web@7.0.0/dist/material-components-web.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Screenshots or screencasts of the bug in action

[ X ] I may be interested in making a pull request to address this

dennisjlee commented 4 weeks ago

I found a workaround to force Panel to load the Material resources from CDN instead - need to add this line before serving the template:

os.environ['BOKEH_RESOURCES'] = "cdn"

However, the Material template in particular has CSS conflicts with some style rules on the page from Jupyter notebook which break the rendering (the ones I found were for #main but there might be other conflicts).

See how the "Hello world" is hidden behind the template's header

However, when I use the "Preview with Panel" button in the notebook, that results in a page that works!

dennisjlee commented 4 weeks ago

I finally noticed the tip on the documentation pages about how template styles can interact badly with notebook styles (e.g. on https://panel.holoviz.org/reference/templates/Material.html). But the original bug stands - at least a few of the templates are relying on panel.io.resources to resolve their static resources, which try to load static resources in a way that doesn't work inside a notebook.

holoviz / panel