title: Refused to execute script from '.../bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled
body: <p>I have an application with React/webpack frontend and Django/python backend.  It has deployed successfully to heroku in the past.  It has been sometime since I did anything in the application and after some recent updates I wanted to update the deployed version.  Heroku reports that the application deployed successfully but when I try to access it, I get the error:</p>
  <p>Refused to execute script from 'https://pairshead-2020.herokuapp.com/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.</p>
  <p>Here is my webpack.config.js:</p>
  <pre><code>const path = require('path')
  const webpack = require('webpack')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  
  module.exports = {
    entry: './src/app.js',
    context: path.resolve(__dirname, 'frontend'),
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'frontend/dist'),
      publicPath: '/'
    },
    devtool: 'source-maps',
    module: {
      rules: [
        { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
        { test: /\.css$/, loader: ['style-loader', 'css-loader'] },
        { test: /\.s(a|c)ss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
        { test: /\.woff2?$/, loader: 'file-loader' },
        { test: /\.(jpg|png|gif)$/, loader: 'file-loader' }
      ]
    },
    devServer: {
      contentBase: 'src',
      hot: true,
      open: true,
      port: 8000,
      watchContentBase: true,
      historyApiFallback: true,
      proxy: {
        '/api': 'http://localhost:4000'
      }
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new HtmlWebpackPlugin({
        template: 'src/index.html',
        filename: 'index.html',
        inject: 'body'
      })
    ]
  }
  
  </code></pre>
  <p>And here is my package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;results&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;scripts&quot;: {
      &quot;build&quot;: &quot;webpack -p&quot;,
      &quot;serve:backend&quot;: &quot;python manage.py runserver 4000&quot;,
      &quot;serve:frontend&quot;: &quot;webpack-dev-server&quot;,
      &quot;seed&quot;: &quot;python manage.py loaddata results/fixtures.json&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.5.5&quot;,
      &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.6.0&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.6.0&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/runtime&quot;: &quot;^7.6.0&quot;,
      &quot;@fortawesome/fontawesome-free&quot;: &quot;^5.10.2&quot;,
      &quot;axios&quot;: &quot;^0.19.0&quot;,
      &quot;babel-loader&quot;: &quot;^8.0.6&quot;,
      &quot;bulma&quot;: &quot;^0.7.5&quot;,
      &quot;copy-webpack-plugin&quot;: &quot;^5.0.4&quot;,
      &quot;css-loader&quot;: &quot;^3.2.0&quot;,
      &quot;file-loader&quot;: &quot;^4.2.0&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^3.2.0&quot;,
      &quot;jsonwebtoken&quot;: &quot;^8.5.1&quot;,
      &quot;moment&quot;: &quot;^2.24.0&quot;,
      &quot;moment-duration-format&quot;: &quot;^2.3.2&quot;,
      &quot;node-sass&quot;: &quot;^4.12.0&quot;,
      &quot;react&quot;: &quot;^16.9.0&quot;,
      &quot;react-dom&quot;: &quot;^16.9.0&quot;,
      &quot;react-image&quot;: &quot;^2.2.0&quot;,
      &quot;react-router-dom&quot;: &quot;^5.0.1&quot;,
      &quot;react-select&quot;: &quot;^3.0.4&quot;,
      &quot;react-select-async-paginate&quot;: &quot;^0.3.13&quot;,
      &quot;react-toastify&quot;: &quot;^5.4.0&quot;,
      &quot;sass-loader&quot;: &quot;^7.3.1&quot;,
      &quot;style-loader&quot;: &quot;^1.0.0&quot;,
      &quot;webpack&quot;: &quot;^4.39.2&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.7&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;babel-eslint&quot;: &quot;^10.0.3&quot;,
      &quot;eslint&quot;: &quot;^6.3.0&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.14.3&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.8.0&quot;
    },
    &quot;engines&quot;: {
      &quot;node&quot;: &quot;12.11.1&quot;,
      &quot;python&quot;: &quot;3.7.5&quot;
    }
  }
  </code></pre>
  <p>Settings.py</p>
  <pre><code>&quot;&quot;&quot;
  Django settings for project project.
  
  Generated by 'django-admin startproject' using Django 2.2.5.
  
  For more information on this file, see
  https://docs.djangoproject.com/en/2.2/topics/settings/
  
  For the full list of settings and their values, see
  https://docs.djangoproject.com/en/2.2/ref/settings/
  &quot;&quot;&quot;
  import os
  # import dj_database_url
  from dotenv import load_dotenv
  import django_heroku
  load_dotenv()
  # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
  BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
  
  
  # Quick-start development settings - unsuitable for production
  # See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
  
  
  SECRET_KEY = os.environ['SECRET_KEY']
  
  
  # SECURITY WARNING: don't run with debug turned on in production!
  DEBUG = True
  
  ALLOWED_HOSTS = ['0.0.0.0', 'localhost', 'pairshead-results.herokuapp.com']
  
  
  # Application definition
  
  INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      'corsheaders',
      'rest_framework',
      'results',
      'django_filters',
      'computed_property',
  ]
  
  MIDDLEWARE = [
      'django.middleware.security.SecurityMiddleware',
      'django.contrib.sessions.middleware.SessionMiddleware',
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      'django.contrib.messages.middleware.MessageMiddleware',
      'django.middleware.clickjacking.XFrameOptionsMiddleware',
  ]
  
  CORS_ORIGIN_ALLOW_ALL = True
  CORS_ALLOW_CREDENTIALS = True
  CORS_ORIGIN_WHITELIST = [
      'http://localhost:3030',
  ]
  CORS_ORIGIN_REGEX_WHITELIST = [
      'http://localhost:3030',
  ]
  
  ROOT_URLCONF = 'project.urls'
  
  TEMPLATES = [
      {
          'BACKEND': 'django.template.backends.django.DjangoTemplates',
          'DIRS': [],
          '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',
              ],
          },
      },
  ]
  
  WSGI_APPLICATION = 'project.wsgi.application'
  
  
  # Database
  # https://docs.djangoproject.com/en/2.2/ref/settings/#databases
  
  DATABASES = {
      'default': {
          'ENGINE': 'django.db.backends.sqlite3',
          'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
      }
  }
  
  # Password validation
  # https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
  
  AUTH_PASSWORD_VALIDATORS = [
      {
          'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
      },
      {
          'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
      },
      {
          'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
      },
      {
          'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
      },
  ]
  
  
  # Internationalization
  # https://docs.djangoproject.com/en/2.2/topics/i18n/
  
  LANGUAGE_CODE = 'en-gb'
  
  TIME_ZONE = 'Europe/London'
  
  USE_I18N = True
  
  USE_L10N = True
  
  USE_TZ = True
  
  
  # Static files (CSS, JavaScript, Images)
  # https://docs.djangoproject.com/en/2.2/howto/static-files/
  
  STATIC_URL = '/static/'
  
  REST_FRAMEWORK = {
      'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
      'PAGE_SIZE': 25,
      'DEFAULT_FILTER_BACKENDS': ('django_filters.rest_framework.DjangoFilterBackend',),
      'PAGE_SIZE_QUERY_PARAM': 'page_size',
      'DEFAULT_RENDERER_CLASSES': [
          'rest_framework.renderers.JSONRenderer',
          'rest_framework.renderers.BrowsableAPIRenderer',
      ],
      'DEFAULT_AUTHENTICATION_CLASSES': [
          'rest_framework.authentication.BasicAuthentication'
      ],
  }
  
  django_heroku.settings(locals())
  # DATABASES['default'] = dj_database_url.config(conn_max_age=600, ssl_require=True)
  
  </code></pre>
  <p>urls.py (from projects folder)</p>
  <pre><code>from django.contrib import admin
  from django.urls import path, include
  
  urlpatterns = [
      path('django-admin/', admin.site.urls),
      path('auth/', include('rest_framework.urls')),
      path('api/', include('results.urls')),
      path('api/', include('jwt_auth.urls')),
      path('', include('frontend.urls')),
  ]
  
  </code></pre>
  <p>wsgi.py</p>
  <pre><code>&quot;&quot;&quot;
  WSGI config for project project.
  
  It exposes the WSGI callable as a module-level variable named ``application``.
  
  For more information on this file, see
  https://docs.djangoproject.com/en/2.2/howto/deployment/wsgi/
  &quot;&quot;&quot;
  
  import os
  
  from django.core.wsgi import get_wsgi_application
  
  os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'project.settings')
  
  application = get_wsgi_application()
  
  </code></pre>
  <p>urls.py</p>
  <pre><code>from django.urls import path
  from .views import clubs
  from .views import events
  from .views import bands
  from .views import crews
  from .views import competitors
  from .views import times
  from .views import results
  from .views import masters_adjustments
  from .views import original_event_category
  
  
  urlpatterns = [
  path('clubs/', clubs.ClubListView.as_view()),
  path('club-data-import/', clubs.ClubDataImport.as_view()),
  path('events/', events.EventListView.as_view()),
  path('event-data-import/', events.EventDataImport.as_view()),
  path('band-data-import/', bands.BandDataImport.as_view()),
  path('bands/', bands.BandListView.as_view()),
  path('crews/', crews.CrewListView.as_view(), name='crews-list'),
  path('crews/&lt;int:pk&gt;', crews.CrewDetailView.as_view(), name='crews-detail'),
  path('', crews.CrewListView.as_view()),
  path('results/', results.ResultsListView.as_view()),
  path('results-export/', results.ResultDataExport.as_view()),
  path('crew-update-rankings/', crews.CrewUpdateRankings.as_view()),
  path('crew-data-import/', crews.CrewDataImport.as_view()),
  path('crew-data-export/', crews.CrewDataExport.as_view()),
  path('competitor-data-export/', competitors.CompetitorDataExport.as_view()),
  path('competitor-data-import/', competitors.CompetitorDataImport.as_view()),
  path('race-times/', times.RaceTimeListView.as_view()),
  path('race-times/&lt;int:pk&gt;', times.RaceTimeDetailView.as_view()),
  path('crew-race-times/', times.CrewRaceTimesImport.as_view()),
  path('masters-adjustments-import/', masters_adjustments.MastersAdjustmentsImport.as_view()),
  path('original-event-import/', original_event_category.OriginalEventCategoryImport.as_view()),
  ]
  
  </code></pre>
  <p>I have a views folder with 9 view files:
  <strong>init</strong>.py</p>
  <pre><code>from .bands import *
  from .clubs import *
  from .competitors import *
  from .crews import *
  from .events import *
  from .times import *
  from .results import *
  from .masters_adjustments import *
  
  </code></pre>
  <p>procfile</p>
  <pre><code>web: python manage.py runserver 0.0.0.0:$PORT --noreload
  
  </code></pre>
  <p>Very grateful for any help anyone can offer.  After reading a few similar questions, I tried setting {output: publicPath: '/'} and {historyApiFallback: true} in webpack.config.js but didn't seem to make any difference.</p>