Cell execution errors after page reload

[MarcosVn]

Description

I am using Plotly as a library to plot some charts in a Cell component, and when I reload the page (F5), an error occurs in the code executed within the cell that does not occur in JupyterLab. Video evidence below:

reload-bug.mp4

Reproduce

1. Configure a simple Cell
2. Install plotly;
3. Put the code below into it:

import plotly.express as px
px.scatter(px.data.iris(), x='sepal_width', y='sepal_length', color='species', title='Test')

4. Execute the Cell (the chart will be displayed)
5. Reload the page (with F5 or another shortcut);
6. Try to execute the Cell again; this will produce empty output
7. Open the console and see the error:

Uncaught TypeError: Cannot read properties of undefined (reading 'newPlot')
    at <anonymous>:1:248
    at Object.execCb (require.min.js:1:16727)
    at e.check (require.min.js:1:10499)
    at e.enable (require.min.js:1:13242)
    at e.init (require.min.js:1:9605)
    at require.min.js:1:15109
(anonymous) @ VM874:1
execCb @ require.min.js:1
check @ require.min.js:1
enable @ require.min.js:1
init @ require.min.js:1
(anonymous) @ require.min.js:1
setTimeout (async)
req.nextTick @ require.min.js:1
s @ require.min.js:1
requirejs @ require.min.js:1
(anonymous) @ VM874:1
attachWidget @ index.es6.js:2601
insertWidget @ index.es6.js:2504
_insertOutput @ widget.js:557
onModelChanged @ widget.js:300
invokeSlot @ index.es6.js:566
emit @ index.es6.js:522
emit @ index.es6.js:112
_onListChanged @ model.js:262
invokeSlot @ index.es6.js:566
emit @ index.es6.js:522
emit @ index.es6.js:112
push @ observablelist.js:139
_add @ model.js:219
add @ model.js:136
OutputArea._onIOPub @ widget.js:101
_handleIOPub @ future.js:246
await in _handleIOPub (async)
handleMsg @ future.js:215
_handleMessage @ default.js:1243
(anonymous) @ default.js:182
Promise.then (async)
KernelConnection._onWSMessage @ default.js:179
Show 20 more frames
Show lessUnderstand this error
18:15:41.000 VM875:1 Uncaught TypeError: Cannot read properties of undefined (reading 'newPlot')
    at <anonymous>:1:248
    at Object.execCb (require.min.js:1:16727)
    at e.check (require.min.js:1:10499)
    at e.enable (require.min.js:1:13242)
    at e.init (require.min.js:1:9605)
    at require.min.js:1:15109

Expected behavior

The cell should be executed as it was the first time: The chart should be rendered without any JS errors in the console.

Context

• Datalayer version: 0.14.0
• Operating System and version: Ubuntu
• Browser and version: Chrome Version 125.0.6422.141

Browser Output

WebSocket connection to 'ws://127.0.0.1:8686/api/jupyter-server/api/events/subscribe?token=test' failed: 
(anonymous) @ index.js:113
_subscribe @ index.js:99
factory @ index.js:30
_execute @ index.es6.js:284
execute @ index.es6.js:220
Show 5 more frames
Show lessUnderstand this error
18:53:39.560 State.js:135 Kernel Manager is Ready KernelManager {_isDisposed: false, _disposed: Signal, serverSettings: {…}, _isReady: true, _kernelConnections: Set(0), …}
18:53:39.561 State.js:170 Starting Kernel Name: python
18:53:39.576 applyTheme.js:154 Theme is light based on '--jp-layout-color1' value: white.
18:53:39.663 default.js:80 Starting WebSocket: ws://127.0.0.1:8686/api/jupyter-server/api/kernels/204000b7-3539-4738-9b95-16f33d9b7e69
18:53:39.671 State.js:187 Kernel is Ready Kernel {_clientId: '899c7971-0416-41fc-aa74-be85cb379fec', _connectionStatus: 'connected', _id: '204000b7-3539-4738-9b95-16f33d9b7e69', _info: undefined, _kernelConnection: KernelConnection, …}
18:53:39.769 Kernel.js:102 Kernel Info {path: 'kernel-d4b9a84e-d88b-462a-8af0-5a63219039e9', id: '204000b7-3539-4738-9b95-16f33d9b7e69', clientId: '899c7971-0416-41fc-aa74-be85cb379fec', sessionId: '6bd41ef7-6fbf-4230-b149-56778599d7b7', kernelInfo: {…}}
18:53:39.772 default.js:80 Starting WebSocket: ws://127.0.0.1:8686/api/jupyter-server/api/kernels/204000b7-3539-4738-9b95-16f33d9b7e69
18:53:39.773 CellAdapter.js:194 Current Kernel Connection KernelConnection {_id: '204000b7-3539-4738-9b95-16f33d9b7e69', _createSocket: ƒ, _onWSOpen: ƒ, _onWSMessage: ƒ, _onWSClose: ƒ, …}
18:53:39.814 index.js:113 WebSocket connection to 'ws://127.0.0.1:8686/api/jupyter-server/api/events/subscribe?token=test' failed: 
(anonymous) @ index.js:113
_subscribe @ index.js:99
factory @ index.js:30
_execute @ index.es6.js:284
execute @ index.es6.js:220
Show 5 more frames
Show lessUnderstand this error
18:53:40.816 index.js:113 WebSocket connection to 'ws://127.0.0.1:8686/api/jupyter-server/api/events/subscribe?token=test' failed: 
(anonymous) @ index.js:113
_subscribe @ index.js:99
factory @ index.js:30
_execute @ index.es6.js:284
execute @ index.es6.js:220
Show 5 more frames
Show lessUnderstand this error
18:53:42.505 index.js:113 WebSocket connection to 'ws://127.0.0.1:8686/api/jupyter-server/api/events/subscribe?token=test' failed: 
(anonymous) @ index.js:113
_subscribe @ index.js:99
factory @ index.js:30
_execute @ index.es6.js:284
execute @ index.es6.js:220
Show 5 more frames
Show lessUnderstand this error
18:53:42.939 plotly.js:1 Uncaught SyntaxError: Unexpected token '<' (at plotly.js:1:1)Understand this error
18:53:42.941 VM810:1 Uncaught TypeError: Cannot read properties of undefined (reading 'newPlot')
    at :1:248
    at Object.execCb (require.min.js:1:16727)
    at e.check (require.min.js:1:10499)
    at e. (require.min.js:1:12915)
    at require.min.js:1:1542
    at require.min.js:1:13376
    at each (require.min.js:1:1020)
    at e.emit (require.min.js:1:13344)
    at e.check (require.min.js:1:11058)
    at e.enable (require.min.js:1:13242)

[Wells-Codes]

I'm able to reproduce when running the Next.js example, but I'm getting a slightly different errors. Not sure if it's the exact same issue, but the repro steps seem the same.

CleanShot.2024-12-03.at.16.31.18-converted.mp4

GET http://localhost:3000/plotly.js net::ERR_ABORTED 404 (Not Found)

require.min.js:1 Uncaught Error: Script error for "plotly"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.min.js:1:1067)
    at HTMLScriptElement.onScriptError (require.min.js:1:13218)