reactjsdjangovitereact-fullstackdjoser

Failed to load module script: help needed

index-d5Zm7UFq.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

I am doing react+vite as frontend and Django and MySQL as backend. It runs without problem in localhsot:5173, but when I run on localhost:8000 it shows this error, what I did after building dist, was I copied the dist folder and pasted it on the backend. I also configured settings.py:

    STATIC_URL = '/static/'
    STATICFILES_DIRS = [os.path.join(BASE_DIR, 'dist')]
    STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
    MEDIA_ROOT = os.path.join(BASE_DIR, 'mediafiles')
    MEDIA_URL = '/media/'

I also set up urls.py:

    from django.urls import path, include, re_path
    from django.views.generic import TemplateView

    urlpatterns = [
      path('auth/', include('djoser.urls.jwt')),
      re_path(r'^.*$', TemplateView.as_view(template_name='index.html')),
      path('vite.svg', TemplateView.as_view(template_name='vite.svg')),
    ]

It is showing blank when I access localhost:8000, and there is this error in the console: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

This is my index.html, which is inside dist:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script type="module" crossorigin src="/assets/index-d5Zm7UFq.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
Solution

  • You are using wrong url

    <script type="module" crossorigin src="/assets/index-d5Zm7UFq.js"></script>

    In django you should use static tag

    1. at the top of your html template load static

      {% load static %}

    2. use {% static 'url' %} tag with your src, href attributes:

      <script type="module" crossorigin src="{% static 'assets/index-d5Zm7UFq.js' %}"></script>

    You html template should look like below:

    {% load static %}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script type="module" crossorigin src="{% static 'assets/index-d5Zm7UFq.js' %}"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>