Unhandled JS Exception: Cannot create styled-component for component: [object Object]

Question

I am trying to eliminate a bug that is causing my React Native 0.53.3 application to crash after it opens the splash screen.

Environment:
  OS: macOS High Sierra 10.13.6
  Node: 11.10.1
  Yarn: 1.10.1
  npm: 6.7.0
  Watchman: 4.7.0
  Xcode: Xcode 10.1 Build version 10B61
  Android Studio: 3.4 AI-183.5429.30.34.5452501

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.53.3 => 0.53.3

From the MacOS console I was able to obtain this error message:

Unhandled JS Exception: Cannot create styled-component for component: [object Object]

The only place in this application where styled-component is being utilized is here package-lock.json:

"styled-components": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-2.4.1.tgz",
      "integrity": "sha1-ZjvQSF1LarRvlGIQ3APSOY0a3nQ=",
      "requires": {
        "buffer": "^5.0.3",
        "css-to-react-native": "^2.0.3",
        "fbjs": "^0.8.9",
        "hoist-non-react-statics": "^1.2.0",
        "is-plain-object": "^2.0.1",
        "prop-types": "^15.5.4",
        "stylis": "^3.4.0",
        "supports-color": "^3.2.3"
      },

and here:

"react-native-material-tabs": {
      "version": "3.5.0",
      "resolved": "https://registry.npmjs.org/react-native-material-tabs/-/react-native-material-tabs-3.5.0.tgz",
      "integrity": "sha512-OSni2m2rcxiIYd082fjjroRrU8o/8pZlP3Ok/m244Gl9vUmhyj5WVeTgSYODjmHksQ9IIF2/sZurZcy3DawF7A==",
      "requires": {
        "prop-types": "^15.5.10",
        "styled-components": "^2.3.0"
      }
    },

It seems that it could be a dependency of react-native-material-tabs? That is the only library that is actually being used, specifically, MaterialTabs:

import MaterialTabs from 'react-native-material-tabs';

And implemented here:

render() {
    return (
      <View style={styles.container}>
        {Platform.OS === 'android' && (
          <MaterialTabs
            uppercase={false}
            items={this.props.tabNames}
            selectedIndex={this.state.selectedIndex}
            onChange={this._selectTab}
            barColor={v2Colors.charcoalDark}
            indicatorColor={v2Colors.green}
            activeTextColor={v2Colors.white}
            inactiveTextColor={v2Colors.gray}
            textStyle={{
              fontSize: moderateScale(14, 0.2),
              ...v2Fonts.GothamRegular,
            }}
          />
        )}
        {Platform.OS === 'ios' && (
          <View style={styles.iOSTabsWrapper}>
            {this.props.tabNames.map((tabName, index) => {
              const tabWrapperStyles = [styles.tabWrapper];
              const tabTextStyles = [styles.tabText];
              if (index === 0) {
                tabWrapperStyles.push(styles.tabWrapperFirst);
              } else if (index === this.props.tabNames.length - 1) {
                tabWrapperStyles.push(styles.tabWrapperLast);
              }

The app crashes so there is no console logging I can do as far as I know. I am honestly not sure if I am on the right track. Has anyone had this issue before? Or can you suggest a way to debug if the problem is indeed with the props inside of MaterialTabs being that I don't have access to console due to the app just crashing natively.

So I went ahead and commented out props inside of <MaterialTabs /> and sure enough the error went away, but the application is still crashing, this time with nothing more than just <FBApplicationProcess: 0x7ff4da65ddd0; appName (com.nfib.appName); pid: 11010> crashed.

The other error I get is Module AppRegistry is not a registered callable module (calling runApplication)

but that is referring to the code inside of index.ios.js and unless I am mistaken there is nothing wrong with it:

import {AppRegistry} from 'react-native';
import KeyboardManager from 'react-native-keyboard-manager';
import AppName from './App';

KeyboardManager.setToolbarPreviousNextButtonEnable(true);

AppRegistry.registerComponent('AppName', () => AppName);

same error, even though I removed everything having to do with styled-components including react-native-material-tabs I am still getting that error in MacOS Console when I try to open the continuing crashing app.

Lately, I have taken a divide and conquer approach by systematically commenting out whole components and screens but thus far I continue to get the same error in the MacOS Console.

Could the problem be originating in my main.jsbundle?

I am finding that no matter which branch I switch to, even branches I have not worked on in weeks, the app crashes natively inside of Simulator. That should not be happening.

So I decided to take a deeper look into the MacOS console, specifically at ~/Library/Logs where the logs for when the app itself crashes should be and I found this line:

BUG in libdispatch client: mach_recv

Answer 1

At some point I introduced what I can only guess were dependency bugs when I attempted to upgrade is my guess. I had a snapshot of a working application with version 0.53.3 that I had set aside.

I was having problems with that one too until a colleague suggested I upgrade Detox version from 8.x.x to 12.0.0 because it was not playing nice with Xcode 10.1.

I did so and the app was no longer crashing.