Doesn't render in VSC

[deanm0000]

When I try to render a graph in VSC I see the Chart data, options, type, etc, up to Chart created in the developer console but then I get ipywidgetsKernel.js:2 Error: Failed to render widget ead80bfb5bb34800a691c9806717554f, TypeError: Cannot read properties of undefined (reading 'parent')

The full errors are:

  | i | @ | ipywidgetsKernel.js:2 -- | -- | -- | --   | d | @ | ipywidgetsKernel.js:2   | (anonymous) | @ | ipywidgetsKernel.js:2   | (anonymous) | @ | ipywidgetsKernel.js:2   | (anonymous) | @ | ipywidgetsKernel.js:2   | o | @ | ipywidgetsKernel.js:2   | Promise.then (async) |   |     | d | @ | ipywidgetsKernel.js:2   | a | @ | ipywidgetsKernel.js:2   | Promise.then (async) |   |     | d | @ | ipywidgetsKernel.js:2   | (anonymous) | @ | ipywidgetsKernel.js:2   | n | @ | ipywidgetsKernel.js:2   | (anonymous) | @ | ipywidgetsKernel.js:2   | (anonymous) | @ | ipywidgetsKernel.js:2   | Promise.then (async) |   |     | (anonymous) | @ | ipywidgetsKernel.js:2   | (anonymous) | @ | ipywidgetsKernel.js:2   | (anonymous) | @ | ipywidgetsKernel.js:2   | (anonymous) | @ | ipywidgetsKernel.js:2   | (anonymous) | @ | ipywidgetsKernel.js:2   | n | @ | ipywidgetsKernel.js:2   | fe | @ | ipywidgetsKernel.js:2   | (anonymous) | @ | ipywidgetsRenderer.js:2   | (anonymous) | @ | ipywidgetsRenderer.js:2   | (anonymous) | @ | ipywidgetsRenderer.js:2   | s | @ | ipywidgetsRenderer.js:2   | Promise.then (async) |   |     | c | @ | ipywidgetsRenderer.js:2   | s | @ | ipywidgetsRenderer.js:2   | Promise.then (async) |   |     | c | @ | ipywidgetsRenderer.js:2   | (anonymous) | @ | ipywidgetsRenderer.js:2   | t | @ | ipywidgetsRenderer.js:2   | renderOutputItem | @ | ipywidgetsRenderer.js:2   | renderOutputItem | @ | notebookWebviewPreloads.js:3   | await in renderOutputItem (async) |   |     | h | @ | notebookWebviewPreloads.js:3   | render | @ | notebookWebviewPreloads.js:3   | render | @ | notebookWebviewPreloads.js:3   | renderOutputElement | @ | notebookWebviewPreloads.js:3   | renderOutputCell | @ | notebookWebviewPreloads.js:3   | await in renderOutputCell (async) |   |     | (anonymous) | @ | notebookWebviewPreloads.js:3   | c.set.queue | @ | notebookWebviewPreloads.js:3   | enqueue | @ | notebookWebviewPreloads.js:3   | (anonymous) | @ | notebookWebviewPreloads.js:3   | postMessage (async) |   |     | (anonymous) | @ | index.html?id=9e26cb…tebookRenderer:1168   | HostMessaging.channel.port1.onmessage | @ | index.html?id=9e26cb…otebookRenderer:308

Uncaught (in promise) SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) at VM171 embed-amd.js:208:86852 at VM171 embed-amd.js:208:86877

  | (anonymous) | @ | VM171 embed-amd.js:208 -- | -- | -- | --   | (anonymous) | @ | VM171 embed-amd.js:208   | Promise.then (async) |   |     | h | @ | VM171 embed-amd.js:208   | (anonymous) | @ | embed-amd.js:210   | execCb | @ | preload.js:1700   | check | @ | preload.js:883   | enable | @ | preload.js:1176   | init | @ | preload.js:788   | (anonymous) | @ | preload.js:1460   | setTimeout (async) |   |     | req.nextTick | @ | preload.js:1819   | localRequire | @ | preload.js:1449   | requirejs | @ | preload.js:1801   | (anonymous) | @ | embed-amd.js:210   | n | @ | embed-amd.js:210   | (anonymous) | @ | embed-amd.js:210   | (anonymous) | @ | embed-amd.js:210

If I do HTML(mychart.get_html_template()) then I get my graph so it's a reasonable work around. I don't really know much about how ipywidgets and all that stuff works in the background so not sure if there's an obvious fix here.

[deanm0000]

I opened this in a standard notebook outside of VSC and I'm getting

[Open Browser Console for more detailed log - Double click to close this message]
Model class 'ChartModel' from module 'ipychart' is loaded but can not be instantiated
TypeError: r._deserialize_state is not a function
    at f._make_model (http://127.0.0.1:8888/lab/extensions/@jupyter-widgets/jupyterlab-manager/static/336.ebc7a55ea1768712771f.js?v=ebc7a55ea1768712771f:1:7933)

336.ebc7a55ea1768712…7a55ea1768712771f:1 TypeError: r._deserialize_state is not a function at f._make_model (336.ebc7a55ea1768712…a1768712771f:1:7933)

  | _make_model | @ | 336.ebc7a55ea1768712…7a55ea1768712771f:1 -- | -- | -- | --   | await in _make_model (async) |   |     | new_model | @ | 336.ebc7a55ea1768712…7a55ea1768712771f:1   | handle_comm_open | @ | 336.ebc7a55ea1768712…7a55ea1768712771f:1   | _handleCommOpen | @ | 134.a63a8d293fb35a52…a8d293fb35a52dc25:1   | _handleCommOpen | @ | 3676.bundle.js:1   | await in _handleCommOpen (async) |   |     | _handleMessage | @ | 3676.bundle.js:1   | await in _handleMessage (async) |   |     | (anonymous) | @ | 3676.bundle.js:1   | Promise.then (async) |   |     | _onWSMessage | @ | 3676.bundle.js:1

VM792:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) at VM769 embed-amd.js:208:86852 at VM769 embed-amd.js:208:86877

  | (anonymous) | @ | VM769 embed-amd.js:208 -- | -- | -- | --   | (anonymous) | @ | VM769 embed-amd.js:208   | Promise.then (async) |   |     | h | @ | VM769 embed-amd.js:208   | (anonymous) | @ | embed-amd.js:210   | execCb | @ | VM768 require.min.js:1   | check | @ | VM768 require.min.js:1   | enable | @ | VM768 require.min.js:1   | init | @ | VM768 require.min.js:1   | (anonymous) | @ | VM768 require.min.js:1   | setTimeout (async) |   |     | req.nextTick | @ | VM768 require.min.js:1   | o | @ | VM768 require.min.js:1   | requirejs | @ | VM768 require.min.js:1   | (anonymous) | @ | embed-amd.js:210   | n | @ | embed-amd.js:210   | (anonymous) | @ | embed-amd.js:210   | (anonymous) | @ | embed-amd.js:210

[nicohlr]

Hello @deanm0000, thanks for raising the issue, I'll investigate this bug as soon as possible.

[nicohlr]

Hello @deanm0000,

I fixed the rendering issue you encountered in the last version of ipychart (0.5.2). You should now be able to render the Chart in VSC and in a standard notebook without any errors.

Please try it again and let me know if the issue is fixed on your end. Don’t hesitate to reach out if you experience any further problems!