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

Answer 2

I tried upgrading react-native from 0.55.2 to 0.53.0 and encountered this error. I didn't try tracking it down beyond that but downgrading react-native to 0.55 should fix it.

Answer 3

My app is ejected and fagerbua's answer helped but I had to struggle a bit further to get it to work. I eventually started a fresh create-react-native-app, ejecting, and edited my package.json and .babelrc to use babel-preset-react-native, the 0.56.0 version of react-native, and the 16.4.1 version of react. I also had to remove the transform-react-jsx-source plugin from the .babelrc file. Below are the files used for a minimal working react-native@0.56.0 app:

.babelrc file:

{
  "presets": [
    "babel-preset-react-native"
  ]
}

package.json:

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-preset-react-native": "^5",
    "jest": "^23.4.2",
    "jest-react-native": "^18.0.0",
    "react-test-renderer": "16.3.1"
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "jest"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-native": "^0.56.0"
  }
}

Once I got this working with the basic app, I copied these changes back into my main app, removed my node_modules folder, did npm install and everything just worked. I'm not sure if the updated jest version was needed, I don't use jest but it was automatically added on create.

Answer 4

As addition to @fagerbua answer. If you want to use react-native@0.56 you need to change .babelrc with { "presets": [ "react-native" ] } you don't need jest-react-native anymore, but you need to use babel-preset-react-native@5