CODEWITHSUNDEEP
pythonhtmldjangosveltesveltekit
Lun
Lun

Reputation: 1131

Django serving build with many MIME Type errors (sveltekit)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="icon" href="/static/icons/tabIcon.svg" />
    <link rel="stylesheet" href="/static/posty.css" />

    <meta http-equiv="content-security-policy" content="" />
    <link
      rel="modulepreload"
      href="/static/_app/immutable/start-6f351e07.js"
    />
    <link
      rel="modulepreload"
      href="/static/_app/immutable/chunks/index-d9a79891.js"
    />
    <link
      rel="modulepreload"
      href="/static/_app/immutable/chunks/index-d827f58a.js"
    />
    <link
      rel="modulepreload"
      href="/static/_app/immutable/chunks/singletons-eca981c1.js"
    />
  </head>
  <body>
    <div>
      <script type="module" data-sveltekit-hydrate="45h" crossorigin>
        import {
          set_public_env,
          start,
        } from "/static/_app/immutable/start-6f351e07.js";

        set_public_env({});

        start({
          target: document.querySelector('[data-sveltekit-hydrate="45h"]')
            .parentNode,
          paths: { base: "", assets: "/static/" },
          session: {},
          route: true,
          spa: true,
          trailing_slash: "never",
          hydrate: null,
        });
      </script>
    </div>
  </body>
</html>

svelte.config.js

import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess(),

    kit: {
        adapter: adapter({
            assets: 'build/assets',
            out: 'dist',
            fallback: 'index.html',
            precompress: false
        })
    }
};

export default config;

settings.py

# ...
DEBUG = True

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'build/assets')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'build')],
        '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',
            ],
        },
    },
]
# ...

Errors

The resource from “http://127.0.0.1:8000/_app/immutable/pages/__layout.svelte-bd484656.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
The resource from “http://127.0.0.1:8000/_app/immutable/assets/__layout-ce6f71c3.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
The resource from “http://127.0.0.1:8000/_app/immutable/chunks/index-d9a79891.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
... 9+ more errors

Desc

Even using python manage.py runserver --nostatic --insecure (using whitenoise) still causes this error, and after building the production version I have to change all of the urls in index.html to start with /static/ or else no files would be found, is there any way to fix or automate during deployment, and is there a better way to do this? Thanks!

Upvotes: 3

Views: 473

Answers (2)

Shmack
Shmack

Reputation: 2341

In addition to Goncalos's answer, unless, something has changed during my few years of being inactive in Javascript, I don't believe you can load js files with the <link> tag.

so tags like these (where you are trying to load Javascript files):

<link rel="modulepreload" href="/static/_app/immutable/chunks/singletons-eca981c1.js"/>

need to be changed to:

<script type="text/javascript" src="/static/_app/immutable/chunks/singletons-eca981c1.js"><script/>

I've had this same error as well. A few times where I was trying to load javascript in <link> and a few times where I couldn't load anything - images, scripts, css, etc.

Upvotes: 0

Gon&#231;alo Peres
Gon&#231;alo Peres

Reputation: 13592

A better way to do that in Django is to load static in the beginning

{% load static %}
<!DOCTYPE html>

and use the static template tag to build the URL for the given relative path using the configured STATICFILES_STORAGE, like

<link href="{% static "css/base.css" %}" rel="stylesheet">

This way if you change the static URL you won't have to change in multiple places of the template. Read more about it here.

For reference, inside the script tags one can use json_script. Read more about it here.

Upvotes: 2

Related Questions