Chrome Extension has a content.js error about UTF-8

Question

After migration from webpack 3.6.0 to webpack 4.29.6 and migrate to babel-loader 8.0.0-beta.6 (from 7.1.5) I see the error:

Unchecked runtime.lastError: Could not load file 'content.js' for content script. It isn't UTF-8 encoded.

I did nothing with code, I only have updated versions in package.json.

So, my application doesn't work. Where is the problem here?

Answer 1

It looks like the JavaScript code somewhere contains non-ASCII characters and Chrome doesn't like the way they are handled when the code gets minified. If you use terser-webpack-plugin you can add an option to handle this:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          output: { ascii_only: true },
        },
      }),
    ],
  },
  ...
};

Heres a relevant issue in terser repo (non-ASCII characters get converted to UTF-8).