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

teethgrinder · 2021-12-03T10:26:37Z

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.

The text was updated successfully, but these errors were encountered:

teethgrinder · 2021-12-03T12:43:50Z

solved using an nginx rule after hours of struggle.

fjsj · 2021-12-06T13:47:54Z

Hi @teethgrinder , do you think this was a config issue on your side? Is there anything we should warn users for on README or change in this project?

fjsj · 2021-12-24T20:15:16Z

We got a similar error from one of our production apps. The issue was the missing publicPath + the use of code splitting, which made the browser request the bundle from the wrong place.

To correctly use code splitting, ensure publicPath is set to your STATIC_URL. Related: #309

teethgrinder closed this as completed Dec 3, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

teethgrinder commented Dec 3, 2021

teethgrinder commented Dec 3, 2021

fjsj commented Dec 6, 2021

fjsj commented Dec 24, 2021

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

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

Comments

teethgrinder commented Dec 3, 2021

teethgrinder commented Dec 3, 2021

fjsj commented Dec 6, 2021

fjsj commented Dec 24, 2021