Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bundlejs error on release build #19788

Closed
3 tasks done
ghost opened this issue Jun 18, 2018 · 24 comments
Closed
3 tasks done

Bundlejs error on release build #19788

ghost opened this issue Jun 18, 2018 · 24 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@ghost
Copy link

ghost commented Jun 18, 2018

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
Copy link
Contributor

vovkasm commented Jun 18, 2018

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
Copy link
Author

ghost commented Jun 18, 2018

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
Copy link
Contributor

vovkasm commented Jun 18, 2018

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

@ghost
Copy link
Author

ghost commented Jun 20, 2018

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

@vovkasm
Copy link
Contributor

vovkasm commented Jun 20, 2018

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

@ghost
Copy link
Author

ghost commented Jun 20, 2018

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
Copy link
Contributor

vovkasm commented Jun 20, 2018

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
Copy link

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
Copy link
Author

ghost commented Jun 24, 2018

@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:

screen shot 2018-06-25 at 9 44 41 am

@ghost
Copy link
Author

ghost commented Jun 29, 2018

@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
Copy link
Contributor

vovkasm commented Jun 29, 2018

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):

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

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
Copy link
Author

ghost commented Jun 29, 2018

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:


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
Copy link
Contributor

vovkasm commented Jun 29, 2018

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"]
}
  1. 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
  1. Clean install, from console:
  • rm -rf node_modules package-lock.json
  • npm install

Test it.

@ghost
Copy link
Author

ghost commented Jun 30, 2018

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
Copy link
Contributor

vovkasm commented Jun 30, 2018

@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
Copy link
Author

ghost commented Jun 30, 2018

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.

@ghost ghost closed this as completed Jun 30, 2018
@vovkasm
Copy link
Contributor

vovkasm commented Jun 30, 2018

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

@clayrisser
Copy link

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

@ronal2do
Copy link
Contributor

+1

@padupuy
Copy link

padupuy commented Sep 12, 2018

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
Copy link

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

@padupuy
Copy link

padupuy commented Sep 14, 2018

@Winglonelion yup

@Winglonelion
Copy link

@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
Copy link

pavlof01 commented Oct 30, 2018

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');

@facebook facebook locked as resolved and limited conversation to collaborators Jun 30, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jun 30, 2019
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

8 participants