Using dash_leaflet causes js library to fail

[cristianleonie-geos]

Is it not possible to integrate a map from dash_leaflet due to the error: Cannot find package dash_leaflet at https://unpkg.com

It may be due to auto-generated src

As a result the map is not shown in the application, application code:

Application

import dash_leaflet as dl
from django_plotly_dash import DjangoDash
from dash import html

app = DjangoDash('Graph')
app.layout = html.Div([
    dl.Map(children=[
        dl.TileLayer()
    ], style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"}, id="map"),
])
if __name__ == '__main__':
    app.run_server()

Html

{% extends 'base.html' %}
{% load static %}
{% load plotly_dash %}
{% block content %}
    <H1> Hello!</H1>
    {% plotly_app name="Graph" %}
{% endblock %}

urls.py

from django.urls import path

from frontendDash import views
from frontendDash.dash_components.TestMap import app

def loadDjangoDash(app):
    print(f"Loading app: {app}")

loadDjangoDash(app)

urlpatterns = [
    path('', views.dash_view, name='dash_view'),
]

Error from console: The resource at "https://unpkg.com/dash_leaflet@0.1.28/dash_leaflet/dash_leaflet.min.js" has been blocked due to a mismatch in MIME type ("text/plain") (X-Content-Type-Options: nosniff).

Another error from console: Error: dash_leaflet was not found.

[cristianleonie-geos]

Shouldn't be relevant since non map applications work as intended, but I'm running the app on Docker starting FROM python:3.11

with the following library versions

dash~=2.9.3
Django~=4.2.6
requests~=2.31.0
dash_leaflet~=0.1.28
pystac_client~=0.7.2
dash_bootstrap_components~=1.4.2
PyYAML~=6.0.1
shapely~=2.0.1
django_plotly_dash~=2.2.2

In settings.py:

INSTALLED_APPS = [
    ...
    'django_plotly_dash.apps.DjangoPlotlyDashConfig',
    'channels',
]
PLOTLY_COMPONENTS = [
    'dash',
    'dash_bootstrap_components',
]
STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'django_plotly_dash.finders.DashAssetFinder',
    'django_plotly_dash.finders.DashComponentFinder'
]
...
X_FRAME_OPTIONS = 'SAMEORIGIN'

[cristianleonie-geos]

Mistakenly closed

[delsim]

If I try accessing https://unpkg.com/dash_leaflet@0.1.28/dash_leaflet/dash_leaflet.min.js then I get the error:

Cannot find package dash_leaflet@0.1.28

This suggests that the issue is with dash_leaflet as the js file is not available - this could also be the source of the wrong MIME type error.

[cristianleonie-geos]

I think the issue is with the js library missing altogether.

From my limited knowledge unpkg shuld be a wrapper for npm js libraries, however when I search dash_leaflet on npm I only find https://www.npmjs.com/package/dash-leaflet (which has actually been posted two days ago, before that it was empty).

Maybe changing the reference to point to the new library would fix it

[delsim]

@cristianleonie-geos what configuration parameters do you have - in particular the STATICFILES_FINDERS and PLOTLY_COMPONENTS ones?

[Alex6937]

I have the same problem. If I try accessing https://unpkg.com/react@16.14.0/umd/react.production.min.js then I get the error: react.production.min.js:24 Uncaught Error: dash_leaflet was not found. 127.0.0.1-1700117403593.log

I change serve_locally. app = DjangoDash(name='demo', serve_locally=True) Error:

http://127.0.0.1:8000/django_plotly_dash/app/demo/_dash-component-suites/dash/deps/react@16.v2_9_3m1700050263.14.0.min.js
react@16.v2_9_3m1700050263.14.0.min.js:24 Uncaught Error: dash_leaflet was not found.

127.0.0.1-1700053308455.log

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 = [
    'dash_core_components',
    'dash_html_components',
    'dash_bootstrap_components',
    'dash_renderer',
    'dpd_components',
    'dpd_static_support',
    'dash_leaflet',
]

[cristianleonie-geos]

Here are mine, this is the last version, but I've tried also other combinations:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/

STATIC_URL = 'static/'
STATICFILES_LOCATION = 'static'
STATIC_ROOT = 'static'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'WebUi/static')
]

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'frontendDash',
    'django_plotly_dash.apps.DjangoPlotlyDashConfig',
    'channels',
]

PLOTLY_COMPONENTS = [
    'dash',
    'dash_bootstrap_components',
]
STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'django_plotly_dash.finders.DashAssetFinder',
    'django_plotly_dash.finders.DashComponentFinder'
]

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',
]

X_FRAME_OPTIONS = 'SAMEORIGIN'

ROOT_URLCONF = 'WebUi.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'WebUI/templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

[Alex6937]

Unfortunately, your solution did not work. Errors persist. "frontendDash" is the name of your application or a library?

[cristianleonie-geos]

No, I was having the same problema and shared my settings, as requested. It's my application