Chrome extension compiled by Webpack throws `unsafe-eval` error

A chrome extension is not allowed to use unsafe-eval, or eval at all in fact.

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_Security_Policy

When making a Chrome extension understand that it's severely limited by Content Security Policies. Make sure you read and understand the WebExtensions Content Security Policy. If you want to have an inline script like:

<script>
    alert('hello')
</script>

You're gonna have to calculate the script tags contents into its SHA256 value and add that to your manifest in order for it to be allowed to be executed.

Took me a few hours but what you probably want to do is change the style of source mapping webpack uses. By default it uses eval.

https://webpack.js.org/configuration/devtool/

I added this to my webpack.config.js: devtool: 'cheap-module-source-map'

The trick to this was figuring out why webpack --mode development has the error and webpack --mode production didn't.

Also I'm using React not Polymer but I'm pretty sure this still applies.

Thanks for the answer from @Randy. However, For Vue CLI generated vue project, there's no webpack.config.js, so the solution will be adding the following config into vue.config.js:

  configureWebpack: {
    devtool: 'cheap-module-source-map'
  }

Interesting read to overcome via Manifest

https://developer.chrome.com/extensions/contentSecurityPolicy

Evaluated JavaScript

The policy against eval() and its relatives like setTimeout(String), setInterval(String), and new Function(String) can be relaxed by adding 'unsafe-eval' to your policy:

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" 

However, we strongly recommend against doing this. These functions are notorious XSS attack vectors.