Bundlejs error on release build

[ghost]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Note: I've gone through other issues but it doesn't seem like they are getting the same error.

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 9.11.1
Yarn: Not Found
npm: 5.6.0
Watchman: 4.9.1
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: Not Found

• Also using Xcode 9.4

Packages: (wanted => installed)
react: ^16.3.1 => 16.3.1
react-native: ^0.55.4 => 0.55.4

Description

For some reason I am getting the following error when building a release version of my application via react-native.

*** Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: t.typeof is not a function. (In 't.typeof("function"==typeof Symbol?Symbol.iterator:"@@iterator")', 't.typeof' is undefined) (/Users/../THEAPP.app/main.jsbundle:11)', reason: 'Unhandled JS Exception: t.typeof is not a function. (In 't.typeof("function...'

I have tried the following:

1. Making bundle by editing the Scheme to be a Release bundle
2. Export a bundle myself by using the following: react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

I get the same error for both of these. And of course, this is after I change my AppDelegate.m to the following:

//jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

[vovkasm]

It would be very helpful if you can provide sample repo that can replicate this error. This error can be caused by too many things...

For now I can only suggest one thing (if this error only in release build, but debug build works as expected): try to play with various versions of uglifyjs. uglifyjs used only in release builds...

[ghost]

I will try to strip away everything to give a sample repo.

Thanks for the suggestion, how would I change the version of uglifyjs? I don't see this in my dependencies list.

[vovkasm]

See this thread: #17348 (comment) for some suggestions. uglify-es (yes its "es" variant) used by metro-minify-uglify used by metro :-)

[ghost]

@vovkasm I had high hopes but unfortunately downgrading my uglify-es yielded the same error :(

[vovkasm]

Ok, if you can give a sample repo, I will look at it... Again there are too many causes.

[ghost]

I appreciate that, I stripped the code down and the error disappeared so I need to figure out a way to securely strip the app but still keep the error.

[vovkasm]

Anyway you can try to debug yourself. What you need is to find the source of the problem. You can find t.typeof("function"==typeof Symbol?Symbol.iterator:"@@iterator") in generated bundle and try to guess where the source of this chunk in your code is (or it may be babel helpers, or something else auto-generated)...
Also check whether you are using any additional babel plugins or configs, it may be the cause as well.

[mattpetrie]

I was experiencing this same error, and (at least for me) it turned out to be an issue with the metro bundler's dependency on Babel 7 and the babel-preset-env Babel preset. Apparently the presets have been renamed for Babel 7 and some of the old packages are not compatible with the new version.

I was able to resolve the error by:

1. removing babel-preset-env
2. installing @babel/preset-env
3. updating the presets section of my .babelrc to:

  "presets": ["@babel/preset-env", "react-native"],

I hope this helps!

[ghost]

@mattpetrie Thank you so much for the guidance. Do you have any tips to make sure everything is running the way it should so I can go on and try something else? I've done the following but not sure if it did anything.

I did:

npm uninstall -g babel-preset-env
npm install --save @babel/preset-env

Added this to my package.json file

 "babel": { "presets": ["@babel/preset-env", "react-native"] }

And created a .babelrc file in my root project with:

{ "presets": ["@babel/preset-env", "react-native"] }

EDIT:

Hmm now I get this:

[ghost]

@vovkasm

Anyway you can try to debug yourself. What you need is to find the source of the problem.

This is the beginning of the source of the problem when I did a search (found it in my bundlejs file):

!(function(e){"use strict";var r,t=e.babelHelpers={};t.typeof="function"==typeof Symbol&&"symbol"===t.typeof("function"==typeof Symbol?Symbol.iterator:"@@iterator")?

[vovkasm]

Hmm... this code definitely incorrect but still we don't know where is it come from. Can you try to locate same (or similar) pattern in debug bundle? there is something like t=e.babelHelpers={} (t and e in debug bundle can have different and longer names), but this code most probably located near the top of the bundle, right?

BTW. I'm just generated production bundle from our app, and found similar pattern (it is sure different), see (formatted for easy reading):

var e, r;
((r = this.babelHelpers = {}).typeof =
  "function" == typeof Symbol &&
  "symbol" ==
    typeof ("function" == typeof Symbol ? Symbol.iterator : "@@iterator")
    ? function(e) {
        return typeof e;
      }
    : function(e) {
        return e &&
          "function" == typeof Symbol &&
          e.constructor === Symbol &&
          e !== ("function" == typeof Symbol ? Symbol.prototype : "@@prototype")
          ? "symbol"
          : typeof e;
      }),
  (r.createRawReactElement = ((e =
    ("function" == typeof Symbol &&
      ("function" == typeof Symbol ? Symbol.for : "@@for") &&
      ("function" == typeof Symbol ? Symbol.for : "@@for")("react.element")) ||
    60103),
  function(r, t, n) {
    return { $$typeof: e, type: r, key: t, ref: null, props: n, _owner: null };
  })),
  (r.classCallCheck = function(e, r) {
    if (!(e instanceof r))
      throw new TypeError("Cannot call a class as a function");
  }),
  // ... etc...

Then I can locate this chunk of code in debug bandle:

(function (global) {
  var babelHelpers = global.babelHelpers = {};
  babelHelpers.typeof = typeof Symbol === "function" && typeof (typeof Symbol === "function" ? Symbol.iterator : "@@iterator") === "symbol" ? function (obj) {
    return typeof obj;
  } : function (obj) {
    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== (typeof Symbol === "function" ? Symbol.prototype : "@@prototype") ? "symbol" : typeof obj;
  };

  babelHelpers.createRawReactElement = function () {
    var REACT_ELEMENT_TYPE = typeof Symbol === "function" && (typeof Symbol === "function" ? Symbol.for : "@@for") && (typeof Symbol === "function" ? Symbol.for : "@@for")("react.element") || 0xeac7;
    return function createRawReactElement(type, key, props) {
      return {
        $$typeof: REACT_ELEMENT_TYPE,
        type: type,
        key: key,
        ref: null,
        props: props,
        _owner: null
      };
    };
  }();

  babelHelpers.classCallCheck = function (instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  };
  // etc...

It is definitely babel-helpers package. I checked it in my package-lock.json and can see it here (with npm ls command):

• [email protected] -> [email protected] -> [email protected]

Also, I can see babel 7 helpers (in case it is matter):

• [email protected] -> [email protected] -> @babel/[email protected]> @babel/[email protected]

Both of packages was deduped and actually located in top level of project node_modules dir.

So question. Can you post package-lock.json, or better do the same analysis? Can you post here your .babelrc and package.json (only dependencies, devDependencies and peerDependencies interested) files?

[ghost]

First off @vovkasm , I'd like to thank you for taking the time to respond. It really is appreciated. I'm not going to lie, I have no idea where to find the bundlejs dev file

I ran this:

react-native bundle --entry-file index.js --platform ios --dev true --bundle-output ios/main.jsbundle --assets-dest ios

And found the following:

(function (global) {
  "use strict";

  var babelHelpers = global.babelHelpers = {};
  babelHelpers.typeof = typeof Symbol === "function" && babelHelpers.typeof(typeof Symbol === "function" ? Symbol.iterator : "@@iterator") === "symbol" ? function (obj) {
    return typeof obj === "undefined" ? "undefined" : babelHelpers.typeof(obj);
  } : function (obj) {
    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== (typeof Symbol === "function" ? Symbol.prototype : "@@prototype") ? "symbol" : typeof obj === "undefined" ? "undefined" : babelHelpers.typeof(obj);
  };

  babelHelpers.createRawReactElement = function () {
    var REACT_ELEMENT_TYPE = typeof Symbol === "function" && (typeof Symbol === "function" ? Symbol.for : "@@for") && (typeof Symbol === "function" ? Symbol.for : "@@for")("react.element") || 0xeac7;
    return function createRawReactElement(type, key, props) {
      return {
        $$typeof: REACT_ELEMENT_TYPE,
        type: type,
        key: key,
        ref: null,
        props: props,
        _owner: null
      };
    };
  }();

  babelHelpers.classCallCheck = function (instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  };

When doing a npm ls command I get:

• UNMET PEER DEPENDENCY [email protected] -> [email protected] -> [email protected]
• [email protected] -> @babel/[email protected] -> @babel/[email protected]

---

Here is my package.json

My .babelrc file is empty after reverting back from Matt's suggestion

My package-lock.json is too big to post but would be happy to if it would help

EDIT: For some reason I am getting the same exact error when loading the dev bundle into my Xcode as well. (If I'm doing it right)

[vovkasm]

Hmm... I need to think some time...

Can you try this steps (may be it helps without deep dive into this):

1. Place this into .babelrc:

{
  "presets": ["react-native"]
}

2. Make changes in package.json

• remove npm (you most probably don't use it from project code, right?) and uglify-es from dependencies
• remove resolutions
• set react-test-renderer and react versions to "16.3.1" (note, without ^, version of react should be the same as in deps in react-native)
• set react-native version to "0.55.4" - it is better to manually upgrade, even patch versions

3. Clean install, from console:

• rm -rf node_modules package-lock.json
• npm install

Test it.

[ghost]

Looks like everything broke now :(

@vovkasm now it seems my Metro Bundler won't start and I get the following error

No Bundle URL present
Make sure you're running a packager server or have included a .jsbundle file in your application bundle

So I ran npm run start to get Metro Bundler work but now I get:

undefined is not an object (evaluating 'CameraManager.Aspect')

Tried doing react-native link and removing react-native-camera and re-installing it but no luck.

[vovkasm]

@bgold0

Looks like everything broke now :(

But it shouldn't if only your dependency info written right.

undefined is not an object (evaluating 'CameraManager.Aspect')

It is sure because you don't have native code linked. But not related to original issue.

[ghost]

I solved this issue by completely restarting my application from scratch using:

react-native init PROJECTNAME

Then installing all my dependencies one-by-one.

Thank you so much @vovkasm for taking the time to help.

[vovkasm]

Good to hear. Anyway it is acceptable solution for problem that take 12 days :-)

[clayrisser]

My app isn't even using babel 7, and I'm getting this error.

[ronal2do]

+1

[padupuy]

Hi there @bgold0 @vovkasm @codejamninja @ronal2do , I had the same pb and I fix it by replacing the content of my .babelrc file.

Before (with the bug from babelHelpers) :

{ "presets": ["env", "react-native"] }

After (🎉) :

{ "presets": ["react-native"] }

[Winglonelion]

@padupuy it means: you just remove preset "env", right ?

[padupuy]

@Winglonelion yup

[Winglonelion]

@padupuy You made my day, bro. I tried hundred configs without success and just remove presets env made my project working perfectly again. It like a dream. :lol:.

[pavlof01]

put it in main index.js
help for me
import 'core-js/es6/map' import 'core-js/es6/symbol' import 'core-js/fn/symbol/iterator' global.Symbol = require('core-js/es6/symbol'); require('core-js/fn/symbol/iterator');