Page MenuHomePhabricator

ES6 minification fails with Section translation js bundle because it's ES8 not ES6
Closed, InvalidPublicBUG REPORT

Description

Section translation js bundle is created using Vue-CLI and bypass ResourceLoader minification using @nomin setting. As ES6 support landed in ResourceLoader, I tried minification with RL.

latest Mediawiki core with wikimedia/minify at 2.2.1 version

Step 1: Remove minifier and disable minification.

diff --git a/app/vue.config.js b/app/vue.config.js
index f6ed7524..ff59c14a 100644
--- a/app/vue.config.js
+++ b/app/vue.config.js
@@ -32,22 +32,7 @@ module.exports = {
       hotUpdateMainFilename: "hot/hot-update.json"
     },
     optimization: {
-      minimizer: [
-        new TerserPlugin({
-          terserOptions: {
-            compress: {
-              drop_console: true
-            },
-            // Do not obfuscate/mangle code
-            mangle: false,
-            output: {
-              // Prevent ResourceLoader minification
-              preamble: "/*@nomin*/",
-              comments: false
-            }
-          }
-        })
-      ],
+      minimize: false,
       splitChunks: {
         cacheGroups: {
           mediawiki_ui: {

Step 2: Add es6: true flag to RL module

diff --git a/extension.json b/extension.json
index c140e800..26537998 100644
--- a/extension.json
+++ b/extension.json
@@ -383,6 +383,7 @@
                        "targets": [
                                "mobile"
                        ],
+                       "es6": true,
                        "scripts": [
                                "dist/js/cx.js",
                                "dist/js/cx.libs.js",

Step 3: Rebuild the bundle: npm run build in app folder of ContentTranslation.

Step 4. Visit Special:ContentTranslation in the development wiki with mobile mode on.

Actual Results:

Javascript error noted:

Expected Results:

Valid javascript is produced by minifier.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

I created a minimal testcase which can reproduce the issue.

(function () {
    async function f() {
        return Promise.resolve([]);
    }
    var a = function () { }
    var b = []
})

Running this through wikimedia/minify/bin/minify produce the following output

(function(){async function f(){
return Promise.resolve([]);}var a=function(){}var b=[]})

This has a syntax error near var b

Removing async from function produce valid js.

async function is part of ECMAScript 2017 ("ES8").

You are right. Async is not a keyword supported by minifier. It just came into bundle because of our browserslistrc configuration lists browsers supporting them.

Jdforrester-WMF renamed this task from ES6 minification fails with Section translation js bundle to ES6 minification fails with Section translation js bundle because it's ES8 not ES6.Mar 17 2021, 4:03 PM

As other commenters have pointed out, async/await is part of ES2017, whereas the minifier only supports ES6 (ES2015) currently. Adding support for async and other post-ES6 language features to the minifier should be pretty easy. However, making those available for MediaWiki code also involves a trade-off: are the additional features worth excluding more browsers? This depends on how useful the new features are, and how much usage the non-supporting browsers have. I've started a task for exploring this here: T277675: Explore native support for ES2016 (ES7) or higher versions

You are right. Async is not a keyword supported by minifier. It just came into bundle because of our browserslistrc configuration lists browsers supporting them.

Given that this affects syntax and not runtime methods, this means the feature test cannot be an early conditional in the same code, but rather to make sure your code does not load in older browsers you need a little init module that fails gracefully; to avoid script errors or confusing user experience. Alternatively, configure ES6 as the target so that it automatically works for those browsers as well.