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?

Start by verifying that manually re-saving the file in UTF8 solves the problem. — wOxxOm, Apr 10 '19 at 04:37
Sounds like [Chrome says my content script isn't UTF-8](//stackoverflow.com/q/49979397). Try also googling the error message text for more solutions. — wOxxOm, Apr 11 '19 at 04:25
Does this answer your question? [Chrome says my content script isn't UTF-8](https://stackoverflow.com/questions/49979397/chrome-says-my-content-script-isnt-utf-8) — Nico Schlömer, May 12 '21 at 06:59

Karolis.sh · Answer 1 · 2019-09-15T09:28:59.387

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).

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

1 Answers1