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!

I was able to get this to bundle by downgrading the version of react-native, webpack and react-navigation which I probably should've done individually to find the root of the problem. If anyone could shed light onto how to set these files up to use the most current versions, that's be fantastic. I'll be digging around more. — hancho, Jul 06 '18 at 12:51
Had a similar problem and did some googling as well (you can see my full answer for what I think was going on here: https://stackoverflow.com/a/51258114/8236733). Basically, it does not *seem* like the versions of `react-native`@0.56, `react`, and `expo` that need to work together have been officially worked out yet (so sticking with react-native@0.55 is *the* workaround for now). Would need to open an issue on the GitHub (https://github.com/react-community/create-react-native-app) for confirmation, though. — lampShadesDrifter, Jul 10 '18 at 06:05
Can you post the complete error message? I suspect this is related to [create-react-native-app#717](https://github.com/react-community/create-react-native-app/issues/717#issuecomment-409209890). — fagerbua, Aug 01 '18 at 06:58

score 6 · Answer 1 · edited Jun 20 '20 at 09:12

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

score 3 · Answer 2 · answered Jul 06 '18 at 13:42

3

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.

answered Jul 06 '18 at 13:42

Rob D

31
3

Thank you, that did fix it for me as well. I'll leave it for now, but will dig in and report back once I figure out the problem. – hancho Jul 06 '18 at 13:43

score 1 · Answer 3 · answered Aug 05 '18 at 17:37

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.

score 1 · Answer 4 · answered Aug 06 '18 at 14:36

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

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

4 Answers4

Linked