Django.fun

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 'https://medtourism.uk/app-a7abdc6b502c1335fd69.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

My webpack.config.js

module.exports = {
   mode:'production',
   entry:{
    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 https://webpack.js.org/guides/asset-modules/
          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": [
    "./node_modules"
  ],
  "include": [
    "./src/**/*.ts",
    "./src/**/*.vue"
  ]
}

In Django:

WEBPACK_LOADER = {
    '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">
  <head>
    <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">
    <title>Medtourism</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
<div id="app"></div>
{% render_bundle 'app' %}
<!-- built files will be auto injected -->
</body>
</html>

Can you help me to solve this ?

Answers: 0