panel convert: Error raised while processing Document events: Error: reference ... isn't known

I'm on the `main` branch of Panel (post 1.3.1) using Bokeh 3.3.0. I'm trying to create a PanelLite playground. I'm having a hard time getting an Panel app with a template to work. I'm trying to find the cause which is hard.

One problem I see is 

```python

```

## Reproduce

`app.py`

```python
import panel as pn

pn.extension()
button = pn.widgets.Button(name="Click Me")
component = pn.Row(button, pn.bind(lambda c: c, button.param.clicks))

pn.template.FastListTemplate(title="Panel Pyodide", main=[component]).servable()
```

```bash
panel convert app.py --skip-embed
```

<details>
<summary>app.html</summary>

```html
<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="utf-8">
    <title>Panel Pyodide</title>
    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.holoviz.org/panel/1.3.1/dist/images/apple-touch-icon.png">
<link rel="icon" href="https://cdn.holoviz.org/panel/1.3.1/dist/images/favicon.ico" type=""><meta name="name" content="Panel Pyodide">    <style>
      html, body {
	display: flow-root;
        box-sizing: border-box;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

<style type="text/css">
:host(.pn-loading),
.pn-loading {
  overflow: hidden;
}

:host(.pn-loading):before,
.pn-loading:before {
  position: absolute;
  height: 100%;
  width: 100%;
  content: '';
  z-index: 1000;
  background-color: rgb(255, 255, 255, 0.5);
  border-color: lightgray;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 50%;
  border-width: 1px;
  cursor: progress;
}

:host(.pn-loading) .pn-loading-msg,
.pn-loading .pn-loading-msg {
  position: absolute;
  top: 72%;
  font-size: 2em;
  color: black;
  width: 100%;
  text-align: center;
}


:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=");
  background-size: auto calc(min(50%, 400px));
}
</style><script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.3.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.3.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.3.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.3.0.min.js"></script>
<script type="text/javascript" src="https://cdn.holoviz.org/panel/1.3.1/dist/panel.min.js"></script>

<script type="text/javascript">
  Bokeh.set_log_level("info");
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.1/dist/bundled/theme/default.css">
<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.1/dist/bundled/fastbasetemplate/fast.css">
<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.1/dist/bundled/fastlisttemplate/fast_list_template.css">
<style type="text/css">

:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=");
  background-size: auto calc(min(50%, 400px));
}
</style>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

<style>
  :root {
    --background-color: #ffffff;
    --body-font: Open Sans, sans-serif;
    --corner-radius: 3;
    --header-background: #0072B5;
    --header-color: #ffffff;
    --sidebar-width: 330px;
  }
  body {
    color: #2B2B2B;
    background-color: var(--background-color);
    font-family: var(--body-font);
  }
  #header a {
    color: currentColor;
  }
  #header-design-provider {
    --neutral-fill-hover: var(--header-background);
    --neutral-fill-rest: var(--header-background);
    --neutral-foreground-rest: var(--header-color);
    background: var(--header-background);
    color: var(--header-color);
  }
  #sidebar {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
  }
</style>


<script src="https://cdn.holoviz.org/panel/1.3.1/dist/bundled/fastbasetemplate/fast_template.js"></script>
<script src="https://cdn.holoviz.org/panel/1.3.1/dist/bundled/@microsoft/fast-components@2.30.6/dist/fast-components.js" type="module"></script>
<script src="https://cdn.holoviz.org/panel/1.3.1/dist/bundled/fast/js/fast_design.js" type="module"></script>


<script type="text/javascript">
document.addEventListener('DOMContentLoaded', (event) => {
  const header_design = new window.fastDesignProvider("#header-design-provider");
  const body_design = window.bodyDesign = new window.fastDesignProvider("#body-design-provider");
  body_design.setLuminance(1.0);
  body_design.setAccentColor("#0072B5")
  body_design.setNeutralColor("#000000");
  header_design.setLuminance(1.0);
  header_design.setAccentColor("#ffffff");
  header_design.setNeutralColor("#ffffff");
});
</script>
  </head>
  <body class="pn-loading pn-arc">
<fast-design-system-provider id="body-design-provider" use-defaults>
  <div id="container">
    <fast-design-system-provider id="header-design-provider">
      <nav id="header" class="shadow" >
	<div class="app-header">
	  <a class="title" href="" >Panel Pyodide</a>
	</div>
	<div id="header-items">
	</div>
	<div class="pn-toggle-theme">
	  <fast-switch id="theme-switch" style="float: right;" onChange="toggleLightDarkTheme('default')" checked>
	    <span slot="checked-message">
              <svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/></svg>
	    </span>
	    <span slot="unchecked-message">
              <svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg>
	    </span>
	  </fast-switch>
	  <fast-tooltip anchor="theme-switch" position="bottom">
	    Toggle the Theme
	  </fast-tooltip>
	</div>
	<div class="pn-busy-container" id="busy-container">
	  <div id="f4f3e401-1bf8-48fb-b201-dc50a5f1e9db" data-root-id="p1016" style="display: contents;"></div>
	</div>
	<fast-tooltip anchor="busy-container" position="left">
	  Busy Indicator
	</fast-tooltip>
      </nav>
    </fast-design-system-provider>

    <div class="row" id="content">

      <div class="main" id="main">
        <div class="card-margin None">
	  <fast-card class="pn-wrapper">
	    <span class="fullscreen-button" onclick="toggleFullScreen(this)">
	      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
		<path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
	      </svg>
	    </span>
	    <div id="514ec927-ac5f-4b9a-882a-500946577119" data-root-id="p1017" style="display: contents;"></div>
	  </fast-card>
	</div>
      </div>
      <fast-dialog id="pn-Modal" hidden>
        <fast-button class="pn-modal-close" id="pn-closeModal">&times;</fast-button>
	<div>
	</div>
      </fast-dialog>
    </div>
  </div>
</fast-design-system-provider>

<script type="text/javascript">
  
</script>

<script type="text/javascript">
  function openNav() {
    document.getElementById("sidebar").classList.remove("hidden");
    document.getElementById("sidebar-button").onclick = closeNav;
  }

  function closeNav() {
    document.getElementById("sidebar").classList.add("hidden");
    document.getElementById("sidebar-button").onclick = openNav;
  }

  var modal = document.getElementById("pn-Modal");
  var span = document.getElementById("pn-closeModal");

  span.onclick = function() {
    modal.style.display = "none";
  }

  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>

<div id="d153cf48-42c8-4593-af30-46f015eaa98b" data-root-id="p1009" style="display: contents;"></div>
<div id="9c53e5c6-d191-4fa3-a050-860fc2c17531" data-root-id="p1012" style="display: contents;"></div>
<div id="391e2b57-3c83-4c07-a76d-aa94351bf9de" data-root-id="p1002" style="display: contents;"></div>
<div id="80f7218f-2939-4226-af56-9e086ee34819" data-root-id="p1013" style="display: contents;"></div>

  
    <script type="text/javascript">
    async function main() {
      let pyodide = await loadPyodide();
      await pyodide.loadPackage("micropip");
      await pyodide.runPythonAsync(`
        import micropip
        await micropip.install(['https://cdn.holoviz.org/panel/wheels/bokeh-3.3.0-py3-none-any.whl', 'https://cdn.holoviz.org/panel/1.3.1/dist/wheels/panel-1.3.1-py3-none-any.whl', 'pyodide-http==0.2.1']);
      `);
      code = `
    import asyncio

    from panel.io.pyodide import init_doc, write_doc

    init_doc()

    import panel as pn

    pn.extension()
    button = pn.widgets.Button(name="Click Me")
    component = pn.Row(button, pn.bind(lambda c: c, button.param.clicks))

    pn.template.FastListTemplate(title="Panel Pyodide", main=[component]).servable()


    await write_doc()`
      await pyodide.runPythonAsync(code);
    }
    main();
    </script>
  </body>
</html>
```

</details>

```bash
python -m http.server
```

Open [localhost:8000/app.html](http://localhost:8000/app.html).

![image](https://github.com/holoviz/panel/assets/42288570/6dd06942-5a00-4f3e-be46-951a04611550)

```bash
Error raised while processing Document events: Error: reference aa08158b-2f3a-4d99-9ddc-f65efce0de6d isn't known
```

Navigation Menu

Uh oh!

Uh oh!

panel convert: Error raised while processing Document events: Error: reference ... isn't known #5830

Reproduce

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Uh oh!

Uh oh!

panel convert: Error raised while processing Document events: Error: reference ... isn't known #5830

Description

Reproduce

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions