Production output contains Function constructor

[t-miller]

Describe the bug
After running yarn build, the generated files still contain the Function() constructor. Upon trying to upload an extension to the Firefox store, the linter states The Function constructor is eval. in both content-script.js and background.js. I have kept the OOTB vue.config.js and babel.config.js.

To Reproduce
Steps to reproduce the behavior:

1. Fix background.js to point to js/content-script.js
2. Run yarn build

Expected behavior
The output files to be free of eval() and Function() to comply with Mozilla's CSP.

Desktop (please complete the following information):

• vue-web-extension version: 2.0.0
• OS: Windows 10 Pro - 19042.746
• Node.js version: 14.15.4

[Kocal]

Hi,

This is maybe due to the usage of the Vue runtime compiler, see https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only, but the option runtimecompiler is disabled by default.

However, this time it looks like it's not coming from Vue but from Webpack itself:

I remember that I fixed the same issue previously in version 1.x, see #398. In our case with version 2.x, we must configure Vue-CLI/Webpack like this:

// vue.config.js

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        global: 'window',
      }),
    ],
  },
  // ...
}

[t-miller]

Yeah, I tried setting Vue to evaluating to the runtime.esm version to no avail. I'll give your webpack config a shot, and let you know, thanks!

[Kocal]

I've opened a PR to fix the issue adambullmer/vue-cli-plugin-browser-extension#110

If this get merged, you will have to update vue-cli-plugin-browser-extension and it should be okay.

[t-miller]

Hey @Kocal - that didn't appear to fix the issue for me. I've created a test repo and attached the build output after adding the webpack config. I still get the following The Function constructor is eval. warnings when I upload to the Firefox Developer Hub.

[Kocal]

Hey, and thanks for your repository!

I've analyzed the generated js/background.js and its sourcemap with source-map-visualization (sorry for the Gist, but the link is sooooo long to be used in a comment or with git.io 😄) and this is what I found:

• line 1 column 5089: due to /node_modules/core-js/internals/task.js,
• line 1 column 28457: due to /node_modules/core-js/internals/global.js,

I suppose the other issues for js/content-script.js and js/chunk-vendors.[hash].js are the same.

Since it's coming from core-js itself (see related issue zloirock/core-js#86), I don't think I can do something about that...
Maybe use a Webpack hook to replace || new Function('return this')() by something else while/after transpiling files... 🤷

[t-miller]

I appreciate the analysis! I'll see what I can do, thanks!

[markon1]

@t-miller Hey man, did you find a way around this?

[jsonwu5]

This problem still exists. Is there a solution?

[t-miller]

I never found a solution sadly

[Kocal]

What about:

Maybe use a Webpack hook to replace || new Function('return this')() by something else while/after transpiling files... 🤷

from #658 (comment)?