I can't load javascript and css

[JMorell]

Hi, I am trying to configure the components.py and I have tried everything in the Media class, but I can't get the css and js to load.

My app path is like this: apps/app_name/components.py

I have tried many combinations but none have worked.

[EmilStenstrom]

Hi!

Unfortunately there is not enough information in you question to tell you where things have gone wrong. The recommended location is '[your app]/components/calendar/calendar.css' and '[your app]/components/calendar/calendar.js', and that you point to those locations in your Media class. Does this not work?

[JMorell]

I added this on components.py:
class Media:
css = 'apps/portal/components/subscription-services/style.css'
js = 'apps/portal/components/subscription-services/script.js'

[David-Guillot]

Hi there,

Where are your JS/CSS files located when you run collectstatic? This apps prefix makes me think Django will have a hard time finding them...

[JMorell]

I don't have much idea about static, what command should I execute? I put collectstatic and it warned me that it is going to rewrite the existing files.

I am only using the basic static folder in the root of the server.

[simkimsia]

Because I literally tried out the readme yesterday, so my memory is still fresh.

This is my Django project layout.

Here's the github repo https://github.com/GreenDeploy-io/example-django-using-hypercomponents

project, hypercomponents are Django apps.

I created my components folder in the same app as the components.py under hypercomponents.

https://github.com/GreenDeploy-io/example-django-using-hypercomponents/tree/main/hypercomponents

Please make sure your setup is as such.

Next, make sure [your-app] is part of INSTALLED_APPS. That was my mistake. It's not very explicitly stated in the README.

https://github.com/GreenDeploy-io/example-django-using-hypercomponents/blob/52328c1847e2b3cbf71372f9eba66588a872272f/config/settings/base.py#L86

Once I added this in, things work for me.

Looking at your path apps/portal/components/subscription-services/style.css with the apps prefix, makes me wonder if you will have issues.

[simkimsia]

Sorry I realized I was mistaken. I too had an issue with the css and js files to my own surprise. ignore what i wrote here.

[EmilStenstrom]

@JMorell I've released a new version of django_components and updated the README with better instructions. Can you get it working now?

[EmilStenstrom]

@JMorell Can you show me how you have set your loaders? The stacktrace does not even mention django_templates? Seems your loader is "None" which should not be possible?

[JMorell]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, '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',
            ],
            'loaders':[(
                'django.template.loaders.cached.Loader', [
                    'django.template.loaders.filesystem.Loader',
                    'django.template.loaders.app_directories.Loader',
                    'django_components.template_loader.Loader',
                ]
            )],
        },
    },
]

[EmilStenstrom]

Ok. So why is the stacktrace pointing to /home/proyectos/venv/lib/python3.9/site-packages/django/template/loaders/cached.py, when that loader isn't even in the list?

[JMorell]

this only happens with the changes applied to the file template_loader.py

[EmilStenstrom]

@JMorell You mean with the latest version of django_components? What happens when you remove the cached loader from loaders?

[liquidiert]

Hey @EmilStenstrom this happens for me too. I still have my custom project structure but using the separated component approach now. Event though I have the load tag for component js dependencies in my template
{% component_js_dependencies %}
it only outputs a placeholder:

Can I get you any more information on how to debug this?

[JuroOravec]

@liquidiert can you paste your Django settings, especially for STATICFILES_DIRS and TEMPLATES, and the version of django-components you're using?

[liquidiert]

@JuroOravec sure!
templates:

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [
            # Contains plain text templates, like `robots.txt`:
            BASE_DIR
            / "templates",
        ],
        "OPTIONS": {
            "context_processors": [
                # Default template context processors:
                "django.contrib.auth.context_processors.auth",
                "django.template.context_processors.debug",
                "django.template.context_processors.i18n",
                "django.template.context_processors.media",
                "django.contrib.messages.context_processors.messages",
                "django.template.context_processors.request",
            ],
            "loaders": [
                (
                    "django.template.loaders.cached.Loader",
                    [
                        "django.template.loaders.filesystem.Loader",
                        "django.template.loaders.app_directories.Loader",
                        "django_components.template_loader.Loader",
                    ],
                )
            ],
            "builtins": [
                "django_components.templatetags.component_tags",
            ],
        },
    }
]

static files:

STATICFILES_FINDERS = (
    "compressor.finders.CompressorFinder",
    "django.contrib.staticfiles.finders.FileSystemFinder",
    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
)

STATICFILES_DIRS = [
    BASE_DIR / "components",
    BASE_DIR / "static",
]

components version: ^0.70

[JuroOravec]

Thanks @liquidiert, sorry to ask again, but could you also include setting for django-components (COMPONENTS) and your middlewares? And the project folder structure.

Do you have autodiscovery turned off by chance? It should be True (default)

Do you have django_components.middleware.ComponentDependencyMiddleware among your middlewares? That's the part that currently replaces the PLACEHOLDER string with actual content.

If yes to both, and it's still not working, I'm out of my depth. In that case, if you can access the python packages, you can try to drop debug/print statements into django_components/middleware.py to debug.

[liquidiert]

Ohh @JuroOravec that's embarrassing.... I forgot to add the middleware when I started a new project. My bad!

[JuroOravec]

Haha, glad we found the issue!

[JuroOravec]

Marking this one as completed as it's quite old already, and the issue shouln't be present anymore. If you have similar issues with newer versions, please open a new discussion / issue.