Create React Native App. - Plugin/Preset files are not allowed to export objects, only functions

Question

Need some help, I'm getting a weird error out of left field that I have not been able to debug. This project was bundling successfully until yesterday after I setup my react native project on another Mac.

I'm wondering if it's from versioning of npm packages I had to reinstall.

Any direction would be helpful, it's always the setup that's the hardest because you do it so infrequently...

My babelrc file is as follows --

{
    "presets": ["babel-preset-expo"],
    "env": {
        "development": {
            "plugins": ["transform-react-jsx-source"]
        }
    }
}

And my package.json

{
  "name": "hancho_frontend",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "jest-expo": "~27.0.0",
    "react-native-scripts": "^1.14.1",
    "react-test-renderer": "16.3.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^6.2.0",
    "axios": "^0.18.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-upgrade": "0.0.19",
    "color": "^2.0.0",
    "expo": "^27.1.0",
    "hoist-non-react-statics": "^2.3.0",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "react": "^16.3.1",
    "react-dom": "^16.4.1",
    "react-fontawesome": "^1.6.1",
    "react-native": "^0.56.0",
    "react-native-dropdownalert": "^3.1.2",
    "react-native-extended-stylesheet": "^0.8.0",
    "react-navigation": "^2.6.1",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.0",
    "redux-axios-middleware": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "webpack": "^4.15.1"
  }
}

I definitely have packages I am not using installed, but it has not caused a problem in the past.

I've cleared cache, uninstalled and reinstalled node_modules. I also reverted to an earlier version of expo that I had working previously. Still no luck.

Thanks in advance!

Answer 1

create-react-native-app uses Expo, which as of the current release (SDK v29) does not support React Native 0.56. Its release announcement explains why:

We did not update to React Native 0.56.0 for this release for two reasons. First, and most notably, in React Native 0.56.0 babel was updated to 7.0.0-beta.47 from ^6.24.1. Previous experiences with babel updates have shown us that they can been frustrating and time consuming for developers who just want to ship their app and minimize the time spent on infrastructure thrashing, so we wanted to give this more time to stabilize.

Second, 0.56.0 introduces some bugs and doesn’t include enough useful features and fixes over 0.55.4 to justify the tradeoff of updating babel.

If you really want to use RN 0.56, and you don't need to use Expo, you can remove the dependency by running npm run eject in the project. You'll still get a similar error message when loading your app, but because of a different dependency that is introduced when you eject. To fix that, install babel-preset-react-native@5 and replace "babel-preset-react-native-stage-0/decorator-support" with "babel-preset-react-native" in the project's .babelrc file. (Note that .babelrc looks different after you've run the eject command.)