4

Issue statement:

Refused to execute script from 'https://something.test.in/21.13888aeefb423ea1abff.chunk.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Possible package responsible for issue:

  • React boilerplate v3.4.0
  • React v15.4.1
  • Webpack v2.3.3
  • offline-plugin v4.5.2

Issue is reproduced randomly and could not trace it by any method

Possible cause of issue: Service-worker update & install after deployment

Solution applied for above cause:

if (process.env.NODE_ENV === 'production') {
  OfflinePluginRuntime.install({
    onUpdating: () => {
      console.log('SW Event:', 'onUpdating');
    },
    onUpdateReady: () => {
      console.log('SW Event:', 'onUpdateReady');
    // Update is applied here
      OfflinePluginRuntime.applyUpdate();
    },
    onUpdated: () => {
      console.log('SW Event:', 'onUpdated');
    // Force reload happens here
      window.location.reload();
    },

    onUpdateFailed: () => {
      console.log('SW Event:', 'onUpdateFailed');
    },
  });
}

Result : Issue not resolved

Webpack configuration for production:

// Important modules this config uses
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OfflinePlugin = require('offline-plugin');

module.exports = require('./webpack.base.babel')({
  // In production, we skip all hot-reloading stuff
  entry: {
    main: path.join(process.cwd(), 'app/app.js'),
  },

  // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',
  },

  devtool: false,

  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: ({ resource }) => {
        if (resource && (/^.*\.(css|scss)$/).test(resource)) {
          return false;
        }
        return /node_modules/.test(resource);
      },
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'bootstrap',
      minChunks: Infinity,
    }),

    // Minify and optimize the index.html
    new HtmlWebpackPlugin({
      template: 'app/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      inject: true,
    }),

    // Put it in the end to capture all the HtmlWebpackPlugin's
    // assets manipulations and do leak its manipulations to HtmlWebpackPlugin
    new OfflinePlugin({
      relativePaths: false,
      publicPath: '/',

      // No need to cache .htaccess. See http://mxs.is/googmp,
      // this is applied before any match in `caches` section
      excludes: ['.htaccess'],

      caches: {
        main: [':rest:'],

        // All chunks marked as `additional`, loaded after main section
        // and do not prevent SW to install. Change to `optional` if
        // do not want them to be preloaded at all (cached only when first loaded)
        additional: ['*.chunk.js'],
      },

      // Removes warning for about `additional` section usage
      safeToUseOptionalCaches: true,

      AppCache: false,

      ServiceWorker: {
        events: true,
      },
    }),
  ],

  performance: {
    assetFilter: (assetFilename) => !(/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename)),
  },
});
Dhara Vihol
  • 602
  • 5
  • 26
  • Your server or service worker is serving javascript with the wrong content type header. It should be `text/javascript` not `text/html` – Avin Kavish Jun 26 '19 at 09:06
  • 1
    If this is the problem, then it should occur every time, but the issue occurs only sometimes. – Dhara Vihol Jun 26 '19 at 09:09
  • It only happens sometimes because the incorrect content type is set only sometimes – Avin Kavish Jun 26 '19 at 09:19
  • 1
    So, can we say the issue is on the service worker side @AvinKavish ? – Dhara Vihol Jun 26 '19 at 10:10
  • I can't be 100% certain but what I am thinking is that a request is being made to a javascript file that does not exist on the server, as a result, the default file, which is index.html, is being served in it's place, because that's what servers are configured to do when a file is not found. Your code somewhere is requesting access to a resource that does not exist on the server anymore. The most common occurrence is when the service worker caches an old version of index.html that links to outdated scripts that have been replaced by the latest deployment to production. – Avin Kavish Jun 26 '19 at 10:18
  • To avoid such issue, i added service-worker events and used ```window.location.reload();``` in ```onUpdated()``` to force update the latest available service-worker file. – Dhara Vihol Jun 26 '19 at 10:29
  • You might have to use, `window.location.reload(true)` to [force a cache miss](https://developer.mozilla.org/en-US/docs/Web/API/Location/reload). – Avin Kavish Jun 26 '19 at 10:33
  • Should i also add ```window.location.reload(true)``` in ```onUpdateFailed()``` also ? Could there be possible reason ```OfflinePluginRuntime.applyUpdate();``` is not completed successfully ? – Dhara Vihol Jun 26 '19 at 11:01

0 Answers0