MIME type error using django-plotly-dash in a Docker Compose stack

I have a Django app where I'd like to integrate Dash in. It is a Nginx, Django and Postgres Docker Compose stack.
However I'm getting an error in the browser console:

Refused to execute script from 'http://localhost:8008/trendyqc/django_plotly_dash/app/Plot/_dash-component-suites/plotly/package_data/plotly.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

settings.py:

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "trend_monitoring",
    "django_bootstrap5",
    "django_plotly_dash.apps.DjangoPlotlyDashConfig",
    "dpd_static_support",
]

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
    "debug_toolbar.middleware.DebugToolbarMiddleware",
    "django_plotly_dash.middleware.BaseMiddleware",
    "django_plotly_dash.middleware.ExternalRedirectionMiddleware",
]

X_FRAME_OPTIONS = "SAMEORIGIN"

STATICFILES_FINDERS = [
    "django.contrib.staticfiles.finders.FileSystemFinder",
    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
    "django_plotly_dash.finders.DashAssetFinder",
    "django_plotly_dash.finders.DashComponentFinder",
    "django_plotly_dash.finders.DashAppDirectoryFinder",
]
PLOTLY_COMPONENTS = [
    # Common components (ie within dash itself) are automatically added
    # django-plotly-dash components
    "dpd_components",
    # static support if serving local assets
    "dpd_static_support",
    # Other components, as needed
    "dash_bootstrap_components",
]

As for the app, I have copy-pasted an example from the dash documentation:

from dash import dcc, html, Input, Output, callback
import dash_bootstrap_components as dbc
from django_plotly_dash import DjangoDash
import plotly.express as px

import pandas as pd

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv"
)

app = DjangoDash(
    "Plot",
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    add_bootstrap_links=True,
)

app.layout = html.Div(
    [
        dcc.Graph(id="graph-with-slider"),
        dcc.Slider(
            df["year"].min(),
            df["year"].max(),
            step=None,
            value=df["year"].min(),
            marks={str(year): str(year) for year in df["year"].unique()},
            id="year-slider",
        ),
    ]
)


@callback(Output("graph-with-slider", "figure"), Input("year-slider", "value"))
def update_figure(selected_year):
    filtered_df = df[df.year == selected_year]

    fig = px.scatter(
        filtered_df,
        x="gdpPercap",
        y="lifeExp",
        size="pop",
        color="continent",
        hover_name="country",
        log_x=True,
        size_max=55,
    )

    fig.update_layout(transition_duration=500)

    return fig

I'm using:

Django==6.0.4
django-bootstrap5==26.2
django-plotly-dash==2.5.0
dpd-static-support==0.0.5

The slider works but the graph component doesn't.

The Django runserver command may use incorrect content types for static assets. To guess content types because Django relies on the mimetypes module from the Python standard library, which itself relies on the underlying platform’s map files.

To fix this, you can force the MIME type for .js files by adding the following to your settings.py:

import mimetypes

mimetypes.add_type("application/javascript", ".js", True)

You can also try to fix your O.S. configuration. If you find improper content types for certain files, it is most likely that the platform’s map files are incorrect or need to be updated. For example:

  • On Red Hat distributions, install or update the mailcap package.

  • On Debian distributions, install or update the mime-support package.

  • On Windows O.S., edit the keys under HKEY_CLASSES_ROOT in the Windows registry.

Вернуться на верх