getting error after upgrading to expo sdk 44 to 46

user_19818182 0
Viewed 694

I have upgraded my expo application which was expo sdk 44 to expo sdk 46.

After upgrading I got this error and trying to figure this for last 4 days. Any help would be helpful..

Here is the error:

ERROR  Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
 
Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:25:19 in errorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:30:24 in <anonymous>
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError

Steps I followed:

  1. Upgraded Expo SDK into 45 and compiled successfully and then upgraded again into SDK 46

  2. Tried registerRootComponent from a file named main.js refernece from expo

  3. Also tried this answer which refers the multiple copies of react-native-safe-area-context tried this solution also

expo react-native
1 Answers

Fixed this issue:

Step 1:

Install the plugin

yarn add --dev babel-plugin-module-resolver deprecated-react-native-prop-types

Step 2:

create index.js file inside project folder resolver/react-native/ with following code

import * as StandardModule from 'react-native';

const deprecatedProps = {
  ImagePropTypes: require('deprecated-react-native-prop-types/DeprecatedImagePropType'),
  TextPropTypes: require('deprecated-react-native-prop-types/DeprecatedTextPropTypes'),
  ViewPropTypes: require('deprecated-react-native-prop-types/DeprecatedViewPropTypes'),
  ColorPropType: require('deprecated-react-native-prop-types/DeprecatedColorPropType'),
  EdgeInsetsPropType: require('deprecated-react-native-prop-types/DeprecatedEdgeInsetsPropType'),
  PointPropType: require('deprecated-react-native-prop-types/DeprecatedPointPropType'),
};

const imgProx = new Proxy(StandardModule.Image, {
  get(obj, prop) {
    if (prop === 'propTypes') return deprecatedProps.ImagePropTypes;
    return Reflect.get(...arguments);
  },
});

const txtProx = new Proxy(StandardModule.Text, {
  get(obj, prop) {
    if (prop === 'propTypes') return deprecatedProps.TextPropTypes;
    return Reflect.get(...arguments);
  },
});

// Had to use a proxy because ...StandardModule made think react-native that all modules were
// being used and was triggering some unnecessary validations / native dep checks.
// This prevents that from happening.
const objProx = new Proxy(StandardModule, {
  get(obj, prop) {
    if (prop in deprecatedProps) {
      return deprecatedProps[prop];
    }
    if (prop === 'Image') {
      return imgProx;
    }
    if (prop === 'Text') {
      return txtProx;
    }
    return Reflect.get(...arguments);
  },
});

module.exports = objProx;

Step 3:

configure module resolver inside babel.config.js, depends on your project requirement to blacklist/whitelist certain npm packages to prevent conflicting file.

example module-resolver config :

var path = require('path');

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ["module-resolver", {
      "root": ["."],
      resolvePath(sourcePath, currentFile, opts) {
        if (
          sourcePath === 'react-native' &&
          !(
            (
              currentFile.includes('node_modules/react-native/') || // macos/linux paths
              currentFile.includes('node_modules\\react-native\\')
            ) // windows path
          ) &&
          !(
            currentFile.includes('resolver/react-native/') ||
            currentFile.includes('resolver\\react-native\\')
          )
        ) {
          return path.resolve(__dirname, 'resolver/react-native');
        }
        /**
         * The `opts` argument is the options object that is passed through the Babel config.
         * opts = {
         *   extensions: [".js"],
         *   resolvePath: ...,
         * }
         */
        return undefined;
      }
    }],
 
  ],
};

for reference this guide

user_198181820
Related