Metro: Minification can break code (but cannot be disabled?)

[haggholm]

In metro@0.24.7 (react-native@0.53.3), src/JSTransformer/worker/minify.js, and presumably in the latest version in metro-minify-uglify, the setting mangle:{toplevel:true} is passed to uglify-es. Unfortunately, this can break code—we have some stuff that breaks if certain React component names are mangled. Our web version uses a blacklist via mangle:{reserved}; with metro, we have to patch the transformer to stop breaking our app.

It would be great if uglify options could be configured for the transformer.

[ozalexo]

Workaround

We get it worked with additional NPM package "patch-package". On each install it applies the following patch:

--- a/node_modules/metro-minify-uglify/src.real/minifier.js
+++ b/node_modules/metro-minify-uglify/src.real/minifier.js
@@ -34,7 +34,11 @@ function withSourceMap(

 function minify(inputCode: string, inputMap: ?BabelSourceMap) {
   const result = uglify.minify(inputCode, {
-    mangle: {toplevel: false},
+    mangle: {
+      toplevel: true,
+      safari10: true,
+      reserved: ["BigInteger", "ECPair", "Point"],
+    },
     output: {
       ascii_only: true,
       quote_style: 3,
--- a/node_modules/metro-minify-uglify/src/minifier.js
+++ b/node_modules/metro-minify-uglify/src/minifier.js
@@ -34,7 +34,11 @@ filename)

 function minify(inputCode, inputMap) {
   const result = uglify.minify(inputCode, {
-    mangle: { toplevel: false },
+    mangle: {
+      toplevel: true,
+      safari10: true,
+      reserved: ["BigInteger", "ECPair", "Point"],
+    },
     output: {
       ascii_only: true,
       quote_style: 3,
--- a/node_modules/metro-minify-uglify/src/minifier.js.flow
+++ b/node_modules/metro-minify-uglify/src/minifier.js.flow
@@ -34,7 +34,11 @@ function withSourceMap(

 function minify(inputCode: string, inputMap: ?BabelSourceMap) {
   const result = uglify.minify(inputCode, {
-    mangle: {toplevel: false},
+    mangle: {
+      toplevel: true,
+      safari10: true,
+      reserved: ["BigInteger", "ECPair", "Point"],
+    },
     output: {
       ascii_only: true,
       quote_style: 3,

[rafeca]

Hi! We recently added the minifierConfig config param in the transformer, which allows you to exactly do that 😄

[Overtorment]

Hey @rafeca, adding "metro" configuration to my package.json didnt help. Added:

  "metro": {
    "minifierConfig": {
      "mangle": {
        "toplevel": true,
        "reserved": [
          "BigInteger",
          "ECPair",
          "Point"
        ]
      }
    }
  },

But manually patching uglify-es/lib/minify.js metro-minify-uglify/src/minifier.js helps.

[ozalexo]

Hey @rafeca, adding "metro" configuration to my package.json didnt help. Added:

According to the docs minifierConfig is Transformer option. Have you tried something like this?

"metro": {
  "transformer": {
    "minifierConfig": {
      "mangle": {
        "toplevel": true,
        "reserved": [
        "BigInteger",
        "ECPair",
        "Point"
        ]
      }
    }
  }
},

[skurgansky-sugarcrm]

using typeorm with react-native-sqlite-storage to build offline app. As i see it minifier.js brakes my code. I have error in release but no in dev mode. When i retured _ref from minify func i didn't have error either.

[chiaraperino]

@skurgansky-sugarcrm I have the same error in typeorm but I don't understand how you have resolve the issue.

I have added inside project metro.config.js file with:

module.exports = {
  metro: {
    transformer: {
      minifierConfig: {
        mangle: false,
      },
    },
  },
};

and inside app.json in expo obj:

"packagerOpts": {
      "config": "./metro.config.js",
      "projectRoots": ""
 }

but doesn't work.

Can you help me?

Thanks
Chiara

[skurgansky-sugarcrm]

@chiaraperino
you can't turn off mangle. don't even try.
try to do this:
1) yarn add -dev metro-minify-terser
2) add to metro.config.js these lines:

minifierPath: 'metro-minify-terser',
  minifierConfig: {
      // https://www.npmjs.com/package/terser#mangle-options
      ecma: 8,
      keep_classnames: true,
      keep_fnames: true,
      module: true,
      mangle: {
        module: true,
        keep_classnames: true,
        keep_fnames: true,
    }
}

worked for me. The problem was in metro-minify-uglify. it works over uglify-es when the latter works over terser.

[chiaraperino]

@skurgansky-sugarcrm thank you for your answer but I have another problem :(

I install metro-minify-terser ("metro-minify-terser": "^0.53.1") but, when I build the bundle, I have the error:

node_modules/expo/AppEntry.js: minify.withSourceMap is not a function. (/node_modules/metro/src/JSTransformer/worker.js)

Have you encontered the same problem?

//metro.config.js
module.exports = {
  transformer: {
    minifierPath: 'metro-minify-terser',
    minifierConfig: {
      ecma: 8,
      keep_classnames: true,
      keep_fnames: true,
      module: true,
      mangle: {
        module: true,
        keep_classnames: true,
        keep_fnames: true,
      },
    },
  },
};

[skurgansky-sugarcrm]

nope. check if you use same version of metro packages: 0.53.1

[chiaraperino]

@skurgansky-sugarcrm thanks for your help!

The problem is the metro packages version with expo that is too old for this configuration (0.45.6).
I have to waiting the new expo sdk that will update react native and also metro version.

Now I apply a work around updating the node_module metro configuration with keep_classnames and keep_fnames equal true and typeorm works!!

Thank you very much

[jrr]

For anyone happening upon this thread and feeling optimistic about the metro-minify-terser workaround above, note that the package was removed from this repo. If it happens to still work you probably shouldn't rely on it.

[skurgansky-sugarcrm]

How does it gonna work later ?

[Arlen22]

Put this in webpack.config.js in your project root directory.

const createExpoWebpackConfigAsync = module.parent.require('@expo/webpack-config');

module.exports = async function(env, argv) {

  const config = await createExpoWebpackConfigAsync(env, argv);
  debugger;
  config.devtool = "source-map";
  return config;
}

At least with the expo start:web command.

[macfanatic]

This forum link solved it for me thankfully, with expo and typeorm.

https://forums.expo.io/t/change-minifierconfig-for-minify-uglify/36460/2