Skip to content

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

Closed
@teethgrinder

Description

@teethgrinder

I am trying to deploy my app using django-webpack-loader and webpack5. I have followed all documentations for now I have formed my webconfig:
I am getting in the developer console:

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

in the frontend part:

 module.exports = {
   entry:{
    app: path.resolve(__dirname, './src/main.ts'),
   },
   output: {
      path: path.resolve(__dirname, './assets/dist'),
      filename: 'main.js'
    },
   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: '/'
      })
   ],
   output: {
     filename: 'main.js',
     path: path.resolve(__dirname, './assets/dist'),
     clean: true,
   },
 };
module.exports = merge(common, {
   mode: 'production',
 });

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>

Thanks for all helps.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions