Django webpack loader vuejs+typescript Refused to execute script frombecause its MIME type ('text/html') is not executable

I am using Django as backend and Vue3 as frontend in my application. In development server i did not have problem but now in production i am having problems to render the page. I have followed all the documentations but cannot find a solution.

I am using django-webpack-loader to render the bundle which I formed using webpack5. But now i am getting an error hence thinking that django is trying to render fallback page.

Refused to execute script from '' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

My webpack.config.js

module.exports = {
    app: path.resolve(__dirname, './src/main.ts'),
   output: {
     filename: '[name]-[hash].js',
     path: path.resolve(__dirname, './assets/dist'),
     clean: true,
   module: {
      rules: [
          test: /\.vue$/,
          use: 'vue-loader'
          test: /\.ts$/,
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/],
          test: /\.css$/i,
          use: [ "style-loader", "css-loader"],
          test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
          // More information here
          type: "asset",
    resolve: {
      extensions: ['.ts', '.js', '.vue', '.json'],
      alias: {
        'vue': '@vue/runtime-dom',
        'bulma': 'bulma/css/bulma.css',
   plugins: [
    new VueLoaderPlugin(),
     new BundleTracker({
        filename: './webpack-stats.json',
        publicPath: '/'

my typescript config:

  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noLib": false,
    "sourceMap": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es2015",
    "baseUrl": "."
  "exclude": [
  "include": [

In Django:

    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'dist/',  # must end with slash
        'STATS_FILE': '/home/ytsejam/public_html/medtourism/medtourism/frontend/webpack-stats.json',
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],
        'LOADER_CLASS': 'webpack_loader.loader.WebpackLoader',

and my index.html:

{% load render_bundle from webpack_loader %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<div id="app"></div>
{% render_bundle 'app' %}
<!-- built files will be auto injected -->

Can you help me to solve this ?

Answers: 0