Suddenly seeing error “Plugin/Preset files are not allowed to export objects, only functions” in create-react-native-app project

Question

Have been working on a project generated via create-react-native-app. Have been successfully using the project for some time, but now trying to test the app via exp start --tunnel, am suddenly seeing error (though was working previously) of the form:

[22:08:19] /path/to/node_modules/react-native-scripts/build/bin/crna-entry.js: Plugin/Preset files are not allowed to export objects, only functions. In /path/to/node_modules/babel-preset-expo/index.js
[22:08:19] Failed building JavaScript bundle.

Have seen some posts that seem to deal with the problem (https://github.com/babel/babel/issues/6808 and Babel Plugin/Preset files are not allowed to export objects, only functions), but am totally new to react-anything and don't fully get what bable is, so am having difficulty understanding how to apply these posts to my own situation.

My .bablerc file (as it seems to be relevant in the other posts) is:

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

Have tried npm cache clean --force && rm -rf node_modules && rm -f package-lock.json && npm install with no change. What does seem to help is downgrading from react-native@0.56 to 0.55 (as espoused here: Create React Native App. - Plugin/Preset files are not allowed to export objects, only functions), but this does not seem to address the problem directly and more of a workaround. Any advice on what should be done here would be appreciated (any other files that should be included to help debug?).

---

** In response to this question being marked as a potential duplicate of Create React Native App. - Plugin/Preset files are not allowed to export objects, only functions,

1. this question was actually cited in the post and explanation of why this question was posted despite the existence of the other was included in the last paragraph and
2. my later answer to this question explains to other users why the downgrade to 0.55 resolves the problem (and cites relevant docs that users can further inspect), which (at the time of this question's posting) was not present in the other cited question (though presently, the user who has marked this question as a duplicate now has an answer in the cited question that does also talk about why the 0.55 downgrade works).

Answer 1

Found that the problem is this:

At some point, must have done a npm update which updated react-native to 0.56 and expo to 28.0.0.

Looking at the react-native docs (https://facebook.github.io/react-native/docs/upgrading.html#create-react-native-app-projects), react-native seems to require installing versions of react-native, react, and expo that are all specifically compatible with each other. A matrix of which versions of which packages are compatible with each other can be found here: https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md and says

Each version of these dependencies is only compatible with a narrow version range of the other two.

As of this writing the document was last updated on April 27, 2018, so it is not exactly clear what versions of react and expo (which has recently released version 28.0.0) should be used in combination with the now-out react-native@0.56. The most recent react-native version that is documented is react-native@0.55 (to go with react@16.3.1 and expo@27.0.0), which I think is why downgrading to react-native@0.55 was helpful in this case (I don't know why there is no documentation in the matrix for react-native@0.56 yet), my package.json now looking like:

...
"dependencies": {
    "@expo/vector-icons": "^6.3.1",
    "eslint": "^4.19.1",
    "expo": "^27.1.0",
    "prop-types": "^15.6.2",
    "react": "16.3.1",
    "react-native": "^0.55.4",
    "react-native-mail": "^3.0.6",
    "react-native-modal-dropdown": "^0.6.2",
    "react-navigation": "^2.6.2",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "tcomb-form-native": "^0.6.14",
    "uuid": "^3.3.2"
  }
}

Answer 2

Same issue happened with me today. Apparently, react-native was upgraded to 0.56.0. Downgraded react-native version back to 0.55.0 solved my issue

npm install react-native@0.55.0

Answer 3

The reason was fully explained by @lampShadesDrifter, however I will add a quicker solution which is to use react-native sdk bundled from expo: https://github.com/expo/react-native/

So you may add this your dependencies with expo sdk 29:

"react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",