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

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 12
Comments: 15 (1 by maintainers)

Most upvoted comments

@chiaraperino you can’t turn off mangle. don’t even try. try to do this:

yarn add -dev metro-minify-terser
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.

skurgansky-sugarcrm on Mar 25, 2019

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.

skurgansky-sugarcrm on Mar 19, 2019

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

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

macfanatic on May 19, 2020

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

rafeca on Nov 2, 2018

Workaround

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

patch-package
--- 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,

ozalexo on Jun 29, 2018

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

skurgansky-sugarcrm on Mar 25, 2019