[BUG] Loading chunk 196 failed error - Windows 11 + Firefox/Edge browsers

[almontoya]

Hi Dash Team,

having an issue with my Dash app and hope you can help.

Context

I have a Dash app that works fine in Windows 10 + various browsers (I run on my work computer in development server).

App automates analysis of uploaded files and displays mixture of plots as png images, interactive plots and Pandas styled tables.

Note: some data runs into millions of points and for front-end performance I convert standard interactive plots to pngs and display these instead.

I tried to run on my home computer on Windows 11 but had 2 main issues as decribed below.

Dependencies

pandas==1.3.1
numpy==1.20.1
scikit-learn==0.22.1
scipy==1.4.1
plotly==5.0.0
dash==2.6.1
dash-core-components==2.0.0
dash-html-components==2.0.0
dash-extensions==0.0.58
dash-uploader==0.5.0
flask==2.1.0
kaleido==0.2.1

System details

• OS: Windows 11
• Browser [Firefox]
• Version [111.0.1 (64-bit)]

Bug description

Loading chunk 196 failed error - seems specific to display of interactive plots.

I write all plots and tables to disk. Interestingly, interactive plots are written to local folder and launch ok in browser, but are not rendered in designated tabs.

Additionally, processes that precede displaying plot pngs (converted from interactive plots) hang indefinitely - as far as I can tell Python pre-processing completes and then hangs in the conversion of plots to pngs. Only Pandas styled tables, that are directly pngs and passed to dashboard front end, display properly (interactive plots in same tab don't appear).

Stack trace as below:

"Loading chunk 196 failed.
(timeout: http://127.0.0.1:8050/_dash-component-suites/dash/dcc/async-graph.js)
(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)

i.f.j@http://127.0.0.1:8050/_dash-component-suites/dash/dcc/dash_core_components.v2_6_1m1681131438.js:2:537575

i.e/<@http://127.0.0.1:8050/_dash-component-suites/dash/dcc/dash_core_components.v2_6_1m1681131438.js:2:534880

i.e@http://127.0.0.1:8050/_dash-component-suites/dash/dcc/dash_core_components.v2_6_1m1681131438.js:2:534845

49069/v<@http://127.0.0.1:8050/_dash-component-suites/dash/dcc/dash_core_components.v2_6_1m1681131438.js:2:43821

17800/e.exports</i/o.get<@http://127.0.0.1:8050/_dash-component-suites/dash/dcc/dash_core_components.v2_6_1m1681131438.js:2:1697

initializeLazyComponentType@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:1450:22

readLazyComponentType@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:11997:32

mountLazyComponent@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:17467:42

beginWork@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:18737:18

beginWork$1@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:23314:16

performUnitOfWork@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:22292:14

workLoopSync@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:22265:24

performSyncWorkOnRoot@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:21891:11

flushSyncCallbackQueueImpl/<@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:11224:26

unstable_runWithPriority@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react@16.v2_6_1m1681131438.14.0.js:2685:14

runWithPriority$1@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:11174:12

flushSyncCallbackQueueImpl@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:11219:26

flushSyncCallbackQueue@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:11207:5

discreteUpdates$1@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:22028:9

discreteUpdates@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:803:14

dispatchDiscreteEvent@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1681131438.14.0.js:4291:20"

Expected behavior

App runs Python processes in back-end i.e. data processing, plot generation, conversion of some plots to pngs and then displays all plots and tables in a multi-tab dashboard. Additionally all plots and tables written to local folder.

Thanks for your time and happy to answer any questions.

Alex

[almontoya]

I tried to update Dash, Plotly and Flask packages to latest versions (as of 13/04/2023).

Still no changes to behaviour observed.

Conclusion so far is that it's a Windows 11 related issue.

[nickmelnikov82]

If you've already updated Dash, Plotly, and Flask to the latest versions and the problem persists, it might actually be related to Windows 11. Windows updates and new operating systems can sometimes cause compatibility issues with certain software.

Here are some more tips you can try:

Check that all dependencies and libraries that your Dash app relies on are compatible with Windows 11. Visit the official documentation and websites for each library to see if there are any known issues or special instructions for compatibility with Windows 11.

Test the Dash app in different browsers in Windows 11. You mentioned an issue in Firefox; try running the app in other browsers, such as Google Chrome or Microsoft Edge, to see if the behavior is the same across browsers or if it is specific to Firefox.

Make sure your graphics drivers are up to date. Outdated or incompatible graphics drivers can sometimes cause problems with interactive storytelling. Visit your graphics card manufacturer's website and download the latest drivers available for Windows 11.

Consider running the Dash app in a virtual environment. Create a virtual environment using a tool like Conda or virtualenv and install all the necessary dependencies in that environment. This will help isolate your application's environment and minimize any potential conflicts with the underlying operating system.

By following these steps, you should be able to make progress in resolving your Windows 11 issue.

[almontoya]

Hi Nick, thanks for the suggestions. I didn't update the other dependencies in case that breaks back-end pre-processing of data before the Dash elements are called for visualisation and display on the front-end. I believe this part is fine.

I did try Edge browser in addtion to FireFox, so expect Chrome to go the same way. I shall try in any case.

My PC is running a 6000 series AMD GPU (much more current than my Windows 10 work PC or laptop on which the app works fine) so perhaps it's a driver issue. Again I can try latest driver and see how I go.

I use Anaconda to create venvs, with specific versions of packages that my app calls. I think I can rule that out for now.

I did some digging around and similar Chunk errors (not related to Dash or Plotly) have been reported and are related to java scripts. This is where my knowledge fails me....I'm more of a Python person.

I will report back on this thread if a find cause/solution.

[nickmelnikov82]

I found some useful resources that can help solve the problem:
article1, article2, article3, article4, article5

[almontoya]

Hi Nick, ok cool...thanks for all those pointers. I need to find some-time to look at this in Windows 11 again. I will report back with progress.

[almontoya]

Hi All,

I finally found a solution. See this post - plotly/Kaleido#126

Downgrading Kaleido version as stated in post did the trick.

For my purposes, the older Kaleido version doesn't appear to cause other issues.

Thanks,

Alex