react-native-vector-icons: Crashes in Release mode on 0.56.0

I’m having some insanely strange bug, that I think is related to http://babeljs.io/docs/en/babel-plugin-transform-class-constructor-call being removed in @babel 7

I’ve spent all day trying to debug this, and it comes down to the icons. As soon as I remove all calls to <Icon ... />, the app works again.

This is with: Xcode: 9.4 OS: MacOS High Sierra

This happens on Android too, so this is most likely a problem with transpiling one way or another. Icons are linked properly, and debug mode works fine. This is with all babel dependencies forced to 7.0.beta47. It crashes with the following message:

2018-07-31 01:55:28.772888+0200 App[645:152282] { [TypeError: TypeError: TypeError: TypeError: undefined is not an object (evaluating '_getPrototypeOf2.default')

This error is located at:
    in Icon
    in RCTView
    in RCTView
    in TouchableHighlight
    in IconButton
    in RCTView
    in RCTView
    in KeyboardAvoidingView
    in RCTView
    in AnimatedComponent
    in withAnimatable(Component)
    in BVLinearGradient
    in LinearGradient
    in LoginScreen
    in Auth0Consumer
    in UserConsumer
    in SceneView
    in RCTView
    in AnimatedComponent
    in Card
    in Container
    in RCTView
    in RCTView
    in StackViewLayout
    in withOrientation
    in RCTView
    in Transitioner
    in StackView
    in Navigator
    in KeyboardAwareNavigator
    in NavigationContainer
    in SceneView
    in SwitchView
    in Navigator
    in NavigationContainer
    in UserConsumer
    in RCTView
    in WebProvider
    in PaymentsProvider
    in Mutation
    in Apollo(PaymentsProvider)
    in UserProvider
    in Mutation
    in Apollo(UserProvider)
    in Mutation
    in Apollo(Apollo(UserProvider))
    in Query
    in Apollo(Apollo(Apollo(UserProvider)))
    in Auth0Consumer
    in OneSignalConsumer
    in CacheConsumer
    in OneSignalProvider
    in ApolloProvider
    in GraphQLProvider
    in AuthorizedFetchConsumer
    in FetchProvider
    in CacheConsumer
    in CacheProvider
    in Auth0Consumer
    in Auth0Provider
    in RootContainer
    in App
    in RCTView
    in RCTView
    in AppContainer

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 19

Most upvoted comments

Holy shit! It works! Thank you @jrnk!

If anybody else runs into this, this is what I’ve done:

1. Updated .babelrc to this:

{
  "env": {
    "development": {
      "presets": ["react-native", "@babel/preset-flow"],
      "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        "graphql-tag",
        "@babel/plugin-proposal-object-rest-spread",
        [
          "@babel/plugin-transform-runtime",
          {
            "helpers": true,
            "polyfill": false,
            "regenerator": false
          }
        ]
      ]
    },
    "production": {
      "presets": ["react-native", "@babel/preset-flow"],
      "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        "graphql-tag",
        "transform-remove-console"
      ]
    }
  }
}

2. package.json has this:

"resolutions": {
    "@babel/core": "7.0.0-beta.47",
    "@babel/runtime": "7.0.0-beta.47",
    "@babel/code-frame": "7.0.0-beta.47",
    "@babel/traverse": "7.0.0-beta.47",
    "@babel/types": "7.0.0-beta.47",
    "@babel/helper-module-imports": "7.0.0-beta.47",
    "@babel/register": "7.0.0-beta.47",
    "babel-core": "^7.0.0-bridge.0",
    "metro": "^0.38.2",
    "metro-babel-register": "^0.38.2",
    "metro-core": "^0.38.2",
    "metro-memory-fs": "^0.38.2",
    "babel-preset-react-native": "^5.0.2"
  },

3. index.js

import { AppRegistry } from 'react-native';
import applyDecoratedDescriptor from '@babel/runtime/helpers/es6/applyDecoratedDescriptor';
import initializerDefineProperty from '@babel/runtime/helpers/es6/initializerDefineProperty';
Object.assign(babelHelpers, {
  applyDecoratedDescriptor,
  initializerDefineProperty,
});

// RN 0.56 Release version crashes
// Workaround: RN 0.56 Release version crashes
// Sources:
//      https://github.com/facebook/react-native/issues/19827
//      https://github.com/facebook/react-native/issues/20150
AppRegistry.registerComponent(
  'Coinalyze',
  () => require('./App/Containers/App').default,
);

Amnesthesia on Jul 31, 2018

Same here, TypeError · TypeError: undefined is not an object (evaluating 'e.default') This error is located at: in r in Styled(r) in RCTView My stacktrace pinpoints it at node_modules/react-native-vector-icons/lib/create-icon-set.js:21:70

jrnk on Jul 31, 2018

@fahidmohammad you need to have .babelrc split in dev/production like here https://github.com/oblador/react-native-vector-icons/issues/801#issuecomment-409268915

Alsop keep @babel/* vesions to 7.0.0-beta.47

rborn on Sep 9, 2018

@Amnesthesia not yet. Will post here if I do of course. I’m also pretty confident it’s a babel 7 transpiling issue; Not yet sure which one though 😃

jrnk on Jul 31, 2018