3

I am in the process of testing the release build of a react native app and found that the minification process is breaking the xml parser library. In this case, there is a [ReferenceError: Can't find variable: dc], which I found out by diving through the minified bundle and logging, to be related to the above referenced library.

Is there a way to disable minification only for this library?

Also, would this be the best approach to tackle this kinds of minification problems?

Pedro Lopes
  • 2,833
  • 1
  • 30
  • 36

1 Answers1

0

Disable minification for React App

What is the current behavior?

When bundling production builds for React Native, names are mangled by default. This can break code (if it relies on Function.name) and the issue is kinda hard to track down (especially if the code accessing Function.name is deep into your dependency tree).

What is the expected behavior?

There should be at least an option to disable mangling, but I believe ideally it should be opt-in rather than opt-out. (Since it can break code in unpredictable ways)

For now relying on manually patching minify.js

Solved by disabling mangling:

Prevent UglifyJS from changing function argument names.

According to the documentation you can use mangle options to do that:

mangle (default true) — pass false to skip mangling names, or pass an object to specify mangling options.

Object options:

  • except - pass an Array of identifiers that should be excluded from mangling
  • toplevel — mangle names declared in the toplevel scope (disabled by default).
  • eval — mangle names visible in scopes where eval or with are used (disabled by default).
  • keep_fnames - default false. Pass true to not mangle function names. Useful for code relying on Function.prototype.name.

in node_modules/metro-bundler/src/JSTransformer/worker/minify.js

function minify(filename, code, sourceMap) {
        const minifyResult = uglify.minify(code, {
            fromString: true,
            inSourceMap: sourceMap,
            outSourceMap: true,
            mangle: false, // ADD THIS LINE
            output: {
              ascii_only: true,
              screw_ie8: true,
            },
        });
 })

OR

May be your issue is due to the combination of running webpack -p and using Uglify Plugin.

Try omitting -p when running build and use uglify plugin, might this fix your issue.

Varsha
  • 966
  • 1
  • 9
  • 19