Not working with Panel (TypeError)

[MarcSkovMadsen]

Hi. I tried using the jupyterwidget with Panel. I would expect it to work as all other anywidgets I've tried have been working. For examples see https://discourse.holoviz.org/t/panel-works-with-anywidget/6466.

Instead I get TypeError: Cannot read properties of undefined (reading 'prototype')

Reproduce

Install the dependencies

pip install panel==1.4.4 bokeh==3.4.1 ipywidgets_bokeh==1.6.0 maplibre[all]==0.2.6 

Create a script.py file

import panel as pn
from maplibre.ipywidget import MapWidget as Map

pn.extension("ipywidgets")

m = Map()

pn.pane.IPyWidget(m).servable()

Serve the file

panel serve script.py --autoreload

Open http://localhost:5006/script

Additional Context

Panel is one of Pythons more popular data app frameworks with more than +1.1 mn downloads per month. Its built on top of Bokeh. What might be special is that it renders for example the maplibre map inside shadow root. That is the only thing I can think of as causing problems? But I don't see any issues in that direction in your anywidget js implementation.

[MarcSkovMadsen]

I can get maplibre js working directly with Panel though.

import panel as pn
import param
from panel.reactive import ReactiveHTML

pn.extension()

class CustomComponent(ReactiveHTML):
    index = param.Integer(default=0)

    _template = '<div id="map" style="height:100%;width:100%"></div>'

    __javascript__=["https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"]
    __css__=["https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"]

    _scripts = {
        "render": """
    new maplibregl.Map({
        container: map, // container element
        style: 'https://demotiles.maplibre.org/style.json', // style URL
        center: [0, 0], // starting position [lng, lat]
        zoom: 1 // starting zoom
    });
        """
    }

CustomComponent(width=500, height=200).servable()

[crazycapivara]

I will take a look at it.